How to add/remove item to/from list in ionic

Question

I have create tabbed ionic application in VS2015. Now I want to add there simple list with possibility add/remove items (something similar to this - sample of angularjs app)

My HTML code (tab-chats.html):

<ion-view view-title="Chats">
  <ion-content>
    <div id="AddItem">
        <h3>Add Item</h3>
        <input value="1" type="number" placeholder="1" ng-model="itemAmount">
        <input value="" type="text" placeholder="Name of Item" ng-model="itemName">
        <br />
        <button ng-click="addItem()">Add to list</button>
    </div>
    <div id="UncheckedList">
        <h4>Unchecked:</h4>
        <table>
            <tr ng-repeat="item in items" class="item-unchecked">
                <td><b>amount:</b> {{item.amount}} -</td>
                <td><b>name:</b> {{item.name}} -</td>
                <td>
                    <button ng-click="removeItem($index)">remove</button>
                </td>
            </tr>
        </table>
    </div>
  </ion-content>
</ion-view>

My JavaScript code in controllers.js:

.controller('ChatsCtrl', function ($scope) {
    $scope.items = [];
    $scope.addItem = function () {
        $scope.items.push({
            amount: $scope.itemAmount,
            name: $scope.itemName
        });

        $scope.itemAmount = "";
        $scope.itemName = "";
    };
    $scope.removeItem = function (index) {
        $scope.items.splice(index, 1);
    };
})

Don't pay attention to "chat" - it was functionality of default app.

This code works, I can add or remove item, but this is item with empty properties. $scope.itemAmount and $scope.itemName are always empty.

I am starting app in Ripple Emulator.

What am I doing wrong and why properties of new item are empty?

score 4 · Accepted Answer · edited Jan 18 '21 at 12:34

You are binding amount and name with $scope.itemAmount and $scope.itemName

$scope.items.push({
   amount: $scope.itemAmount,
   name: $scope.itemName
});

And when you do following, then empty strings are stored to that item because of two way binding.

 $scope.itemAmount = "";
 $scope.itemName = "";

So instead you should pass these two values from template as parameters to function addItem like this

<button ng-click="addItem(itemAmount,itemName )">Add to list</button>

and in controller:

$scope.addItem = function (itemAmount, itemName) {
   $scope.items.push({
      amount: itemAmount,
      name: itemName
   });
   $scope.itemAmount = "";
   $scope.itemName = "";
};

Full Code Demo:

var app = angular.module("myApp",[]);
app.controller("myController", function($scope){
  $scope.name="asd";
  $scope.items = [];
  $scope.addItem = function (itemAmount, itemName) {
   $scope.items.push({
      amount: itemAmount,
      name: itemName
   });
   $scope.itemAmount = "";
   $scope.itemName = "";
 };
  
 $scope.removeItem = function (index) {
   $scope.items.splice(index, 1);
 };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
  <div id="AddItem">
      <h3>Add Item</h3>
      <input value="1" type="number" placeholder="1" ng-model="itemAmount">
      <input value="" type="text" placeholder="Name of Item" ng-model="itemName">
      <br />
      <button ng-click="addItem(itemAmount,itemName)">Add to list</button>
    </div>
  <div id="UncheckedList">
      <h4>Unchecked:</h4>
      <table>
         <tr ng-repeat="item in items" class="item-unchecked">
            <td><b>amount:</b> {{item.amount}} -</td>
            <td><b>name:</b> {{item.name}} -</td>
            <td>
               <button ng-click="removeItem($index)">remove</button>
            </td>
          </tr>
      </table>
  </div>
</body>

EDIT: Check out solution in the chat. Find url to chat in comments or here.

It is my pets project, so I will be able to check this at home only (in 8 hours at least). But I put breakpoint in addItem method. And I saw that $scope.itemAmount and $scope.itemName are `undefined` in this method. — RredCat, Aug 26 '15 at 08:37
in your code or my code ? If that is the case , then these 2 variables can be defined in controller with empty strings. — Mudasser Ajaz, Aug 26 '15 at 08:47
In my code. I will have possibility to check your code in 8+ hours. Sorry that disturb, I will write when I have some result. — RredCat, Aug 26 '15 at 08:55
It is partly fix my issue. Now I can pass parameter to my method (addItem(itemAmount,itemName) - this part works) but "$scope.itemName" and "$scope.itemAmount" are undefined in the method addItem. So when I am trying to refresh them it doesn't impact View value in inputs. — RredCat, Aug 26 '15 at 19:27
try to initialize these two variables in controller start with empty strings. — Mudasser Ajaz, Aug 26 '15 at 19:32
Tried, now these two variables are always empty (""). Looks like they aren't connected to models on view. I have committed entire project on github - https://github.com/RredCat/Chekers (without last changes that you suggested me). — RredCat, Aug 26 '15 at 19:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/88039/discussion-between-mudasser-ajaz-and-rredcat). — Mudasser Ajaz, Aug 26 '15 at 20:14

How to add/remove item to/from list in ionic

1 Answers1