如何在离子列表中添加/删除项目答案

【问题标题】：How to add/remove item to/from list in ionic如何在离子列表中添加/删除项目
【发布时间】：2015-10-23 00:15:20
【问题描述】：

我在 VS2015 中创建了选项卡式离子应用程序。现在我想在那里添加简单的列表，可以添加/删除项目（类似于这个 - 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>

我在 controllers.js 中的 JavaScript 代码：

.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);
    };
})

不要注意“聊天” - 这是默认应用程序的功能。

此代码有效，我可以添加或删除项目，但这是具有空属性的项目。 $scope.itemAmount 和 $scope.itemName 始终为空。

我正在Ripple Emulator 启动应用程序。

我做错了什么以及为什么新项目的属性为空？

【问题讨论】：

标签： angularjs cordova ionic-framework ionic angularjs-model

【解决方案1】：

您正在将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>

编辑：在聊天中查看解决方案。在 cmets 或 here 中查找 url 聊天。

【讨论】：

这是我的宠物项目，所以我只能在家里检查这个（至少在 8 小时内）。但是我在 addItem 方法中放置了断点。而且我在这个方法中看到 $scope.itemAmount 和 $scope.itemName 是undefined。
在您的代码或我的代码中？如果是这种情况，那么这两个变量可以在控制器中用空字符串定义。
在我的代码中。我将有可能在 8 个多小时内检查您的代码。不好意思打扰了，等有结果再写。
部分解决了我的问题。现在我可以将参数传递给我的方法（addItem(itemAmount,itemName) - 这部分有效），但在方法 addItem 中未定义“$scope.itemName”和“$scope.itemAmount”。因此，当我尝试刷新它们时，它不会影响输入中的 View 值。
尝试在控制器中初始化这两个变量以空字符串开头。