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?
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.