If you want to make a functionality of manually adding items to the list using Angular JS. Then you can use the following code of Angular JS it will work on client side and performs fast.
For the form the HTML will go like this:-
<div ng-controller="Ctrl1">
<h2>Ctrl1 - List</h2>
<ul>
<li ng-repeat="item in list()">{{item}}</li>
</ul>
</div>
<hr />
<div ng-controller="Ctrl2">
<h2>Ctrl2 - Add</h2>
<form ng-submit="add(newItem); newItem = '';">
<input type="text" placeholder="new item..." ng-model="newItem">
<br />
<input class="btn" type="submit">
</form>
</div>
and the JS file will go like this:-
var app = angular.module('myApp', []);
app.factory('items', function() {
var items = [];
var itemsService = {};
itemsService.add = function(item) {
items.push(item);
};
itemsService.list = function() {
return items;
};
return itemsService;
});
function Ctrl1($scope,items) {
$scope.list = items.list;
}
function Ctrl2($scope, items) {
$scope.add = items.add;
}
0 Comment(s)