Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make add item list using Angular JS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 279
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: