Tuesday, January 30, 2018

How to write a program for application in angularJS.

  • In the HTML, add a text field, and bind it to the application with the ng-model directive.
  • In the controller, make a function named addItem and use the value of the addme input field to add an item to the products array.
  • Add a button, and give it an ng-click directive that will run the addItem function when the button is clicked.
Program

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="ABC" ng-controller="DEF">
<ul>
<li ng-repeat="x in products">
{{x}}
<span ng-click="removeItem($index)">x
</span>
</li>
</ul>
<input ng-model="addme">
<button ng-click="addItem()">Add
</button>
 <p> 
  {{errortext}}
  </p>
</div>
  <p>
         Click the little x to remove an item from the shopping list.
 </p>
<script>
var app = angular.module("ABC", []); 
app.controller("DEF", function($scope) 
{
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () 
    {
        $scope.errortext = "";
        if (!$scope.addme) 
        {
        return;
        }        
       if ($scope.products.indexOf($scope.addme) == -1) 

      {
           $scope.products.push($scope.addme);
       
        else
        {
           $scope.errortext = "The item is already in your shopping list.";
        }
  }
    $scope.removeItem = function (x) 
    {
       $scope.errortext = "";    
       $scope.products.splice(x, 1);
    }
});
</script>
</body>
</html>


Output






0 comments:

Post a Comment

Thanks For Commented.

TechTalk