Working with List Items in Angular

by Diya_Khan

HTML

<div ng-app>
  <h2 style='text-align:center;'>Items List</h2>
  <div ng-controller="ListCtrl">
    <span>{{items.length}} Items</span>    
    <ul class="unstyled">
      <li ng-repeat="item in items">        
        <span>{{item.name}}</span>&nbsp;
        <span>{{item.category}}</span>&nbsp;
        <span>{{item.price}}</span>&nbsp;
      </li>
    </ul>
      <br/>
       Search: <input ng-model="query">
      <br />
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Category</th>
                <th>Price</th>                                
            </tr>
        </thead>
 <tbody ng-repeat="item in items | filter:query">
           <tr>
                <td>
                    <input type="text" ng-model="item.name" />
                </td>
                <td>
                    <input type="text" ng-model="item.category" />
                </td>
                <td>
                    <input type="text" ng-model="item.price" />
                </td>
            </tr>
        </tbody>
      </table>
      <br/>
      <h2 style='text-align:center;font-weight:bold;'>Total Price</h2>
      <br/>
    <form ng-submit="addItem()">
        <h2>Add New Item</h2>
        <span>Name:</span>
        <input type="text" ng-model="itemName"  size="30"
        placeholder="name here"/>
        <br/>
        <span>Category:</span>
      <input type="text" ng-model="itemCategory"  size="30"
        placeholder="category here"/>
        <br/>
        <span>Price:</span>
      <input type="text" ng-model="itemPrice"  size="30"
        placeholder="price here"/>
      <input class="btn-primary" type="submit" value="add"/>
    </form>
  </div>
</div>

JavaScript

function ListCtrl($scope) {
  $scope.items = [
{"name":"Peach","category":"Fruits","price":1},         {"name":"Plum","category":"Fruits","price":0.75},{"name":"Donut","category":"Bread","price":1.5},{"name":"Milk","category":"Dairy","price":4.5}
];
  
 $scope.categories = ["Bread", "Dairy", "Fruits", "Vegetables"],

  $scope.addItem = function() {
      $scope.items.push({name:$scope.itemName, category:$scope.itemCategory, price: $scope.itemPrice});
    $scope.itemName = '';
    $scope.itemCategory = '';
    $scope.itemPrice = ''; 
    $scope.items[0].name = "pineapple";
    //alert($scope.items[0].name);
      
  };
/*
  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
  */
}