Web Programming TutorialsLearn working with Arrays in AngularJS

Learn working with Arrays in AngularJS

arrays-740X296

In this tutorial, we’re going to work with an array and see what features of AngularJS we can utilize to manage it. We’re going to use features of Angular forms as well as arrays to make our array dynamic and user-interactive.

We’re going to start our demonstration by using the grocery list array we have created in a previous tutorial:

<script>
var app1 = angular.module('app1', []);
app1.controller('Grocery', function($scope) {
$scope.lst = [
{item:'banana', needed:false},
{item: 'apple', needed:false},
{item:'milk', needed:false},
{item: 'tomato', needed:false},
{item:'juice', needed:false}
]
});

</script>

We want to allow the user to be able to add items to the array/grocery list by clicking a button. For that we’ll have to create a new $scope property, like so:

$scope.addTolist = function(addItem){
 if (!(addItem === undefined || addItem === '')){
     $scope.list.push({item: addItem, needed: false});
     } else {
        $scope.NoItemError = 'Please enter an item';
            }
}

Explanation: addItem is a parameter that holds the value the user enters in the text input box. When a button is clicked, the value of the addItem is added to the array using the above function. The function first checks if the user entered a defined string, in which case it uses the push method to add the item into the array(as an object, with a default of needed:false). Otherwise, it sets the NoItemError attribute to include an error message.

We are going to connect the ‘backstage’ data with the view(HTML), referencing the controller we have created and binding the data the user enters to the addItem parameter using ng-model:

<div> enter item:
 
   <input type="text" ng-model='addItem'/>
 
</div>
 
   <button ng-click='addTolist(addItem)'>Add to list</button>
 
 <h2>{{NoItemError}}</h2>
</div>  

When the user clicks the button, it triggers the addTolist function. If the user didn’t type anything in the input field, the  value of NoItemError will be set to an error message that will then be displayed in the expression, inside <h2> tags.

https://blog.eduonix.com/wp-content/uploads/2015/10/Learn-Javascript-And-JQuery-From-Scratch.png

All that’s left to do now is to display the grocery list using the ng-repeat directive with the lst property and referencing our controller:

<div id='Grocery' ng-controller='Grocery'>
      <h3>Grocery List</h3>
        <div ng-repeat='x in lst'>
          <h4>{{x.item}}</h4>
        </div>

So, this is how we can add items to arrays using AngularJS. Let‘s write the code in full and see it in action:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app='app1'>
    <div id='Grocery' ng-controller='Grocery'>
      <h3>Grocery List</h3>
        <div ng-repeat='x in lst'>
          <h4>{{x.item}}</h4>
        </div>
      <br>
     
   <p> enter item:
   <input type="text" ng-model='addItem'/>
   </p>
   <button ng-click='addTolist(addItem)'>Add to list</button>
    <h2>{{NoItemError}}</h2>
    </div> <!-- End of Grocery -->
 <script>
var app1 = angular.module('app1', []);
app1.controller('Grocery', function($scope) {
$scope.lst = [
{item:'banana', needed:false},
{item: 'apple', needed:false},
{item:'milk', needed:false},
{item: 'tomato', needed:false},
{item:'juice', needed:false}
]
$scope.addTolist = function(addItem){
 if (!(addItem === undefined || addItem === '')){
     $scope.lst.push({item: addItem, needed: false});
     $scope.NoItemError = '';
     } else {
        $scope.NoItemError = 'Please enter an item';
            }
}
});
</script>
</body>

arrays

To summarise, in this lesson we’ve used an array of objects to demonstrate how we can utilise AngularJS to easily create a dynamic and user-interactive list. As we’ve demonstrated, we can easily bind data using Angular directives and pass it into $scope functions as a parameter or trigger &scope functions as properties to DOM events.

4 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -