如何 add/remove item to/from list in ionic
How to add/remove item to/from list in ionic
我已经在 VS2015 中创建了选项卡式离子应用程序。现在我想在其中添加可能包含 add/remove 项的简单列表(类似于此 - sample of angularjs app)
我的HTML代码(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>
我的 JavaScript 代码在 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);
};
})
不要注意 "chat" - 这是默认应用程序的功能。
此代码有效,我可以添加或删除项目,但这是具有空属性的项目。 $scope.itemAmount
和 $scope.itemName
始终为空。
我将在 Ripple Emulator 中启动应用程序。
我哪里做错了,为什么新项目的属性是空的?
您正在将 amount
和 name
绑定到 $scope.itemAmount
和 $scope.itemName
$scope.items.push({
amount: $scope.itemAmount,
name: $scope.itemName
});
并且当您执行以下操作时,由于双向绑定,空字符串将存储到该项目。
$scope.itemAmount = "";
$scope.itemName = "";
因此,您应该像这样将模板中的这两个值作为参数传递给函数 addItem
<button ng-click="addItem(itemAmount,itemName )">Add to list</button>
在控制器中:
$scope.addItem = function (itemAmount, itemName) {
$scope.items.push({
amount: itemAmount,
name: itemName
});
$scope.itemAmount = "";
$scope.itemName = "";
};
完整代码演示:
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>
编辑: 在聊天中查看解决方案。找到 url 在评论中聊天或 here.
我已经在 VS2015 中创建了选项卡式离子应用程序。现在我想在其中添加可能包含 add/remove 项的简单列表(类似于此 - sample of angularjs app)
我的HTML代码(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>
我的 JavaScript 代码在 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);
};
})
不要注意 "chat" - 这是默认应用程序的功能。
此代码有效,我可以添加或删除项目,但这是具有空属性的项目。 $scope.itemAmount
和 $scope.itemName
始终为空。
我将在 Ripple Emulator 中启动应用程序。
我哪里做错了,为什么新项目的属性是空的?
您正在将 amount
和 name
绑定到 $scope.itemAmount
和 $scope.itemName
$scope.items.push({
amount: $scope.itemAmount,
name: $scope.itemName
});
并且当您执行以下操作时,由于双向绑定,空字符串将存储到该项目。
$scope.itemAmount = "";
$scope.itemName = "";
因此,您应该像这样将模板中的这两个值作为参数传递给函数 addItem
<button ng-click="addItem(itemAmount,itemName )">Add to list</button>
在控制器中:
$scope.addItem = function (itemAmount, itemName) {
$scope.items.push({
amount: itemAmount,
name: itemName
});
$scope.itemAmount = "";
$scope.itemName = "";
};
完整代码演示:
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>
编辑: 在聊天中查看解决方案。找到 url 在评论中聊天或 here.