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


#1

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?


#2

Watching variables directly on scope doesn’t always seem to work, so try moving “itemAmount” and “itemName” to an object, e.g:

$scope.newItem = {
    amount: "",
    name: ""
};

Then of course update your bindings:

<input value="1" type="number" placeholder="1" ng-model="newItem.amount">
<input value="" type="text" placeholder="Name of Item" ng-model="newItem.name">

#3

@SigmundFroyd is correct, you must use .dot notation with Ionic Framework.

###Read this.