如何在AngularJS中添加/删除字符串数组

Question

我需要将数据绑定到一个字符串数组..我需要一个方向数组.

我这样模块化:

JS

function ShoppingCartCtrl($scope) {
    $scope.directions = ["a", "b", "c"];
    $scope.addItem = function (item) {
        $scope.directions.push(item);
        $scope.item = "";
    };
    $scope.removeItem = function (index) {
        $scope.directions.splice(index, 1);
    };
}

HTML

<div ng-app>
    <div ng-controller="ShoppingCartCtrl">
        <br />
        <table border="1">
            <thead>
                <tr>
                    <td>directions</td>
                    <td>Remove Item</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in directions">
                    <td>
                        <input ng-model="item" />{{$index}}
                    </td>
                    <td>
                        <input type="button" value="Remove" ng-click="removeItem($index)" />
                    </td>
                </tr>
            </tbody>
        </table>
        <br />
        <table>
            <tr>
                <td>
                    <input type="text" ng-model="item" />
                </td>
                <td colspan="2">
                    <input type="Button" value="Add" ng-click="addItem(item)" />
                </td>
            </tr>
            <tr>
                <td>{{directions}}</td>
            </tr>
        </table>
    </div>
</div>

一切都按预期工作,但我有一个我找不到的错误.当您尝试直接从输入修改值时,您不允许.你写的并没有发生任何事情(这是通过在JSFIDDLE中提出最后一个角落来解决的).

继续:现在您可以修改值,但不会在模型中更新它们.如果有人可以帮助我,那就太棒了!!

你可以看到它在这个jsfiddle中工作

Answer 1

绑定到基元时，旧版本的 Angular 存在问题。看到这个问题

所以首先将版本更新到较新版本的 Angular。

ng-repeat创建一个子作用域。因为您的iteminng-repeat="item in directions"是一个原始类型（即字符串），所以<input ng-model="item">修改了子作用域。这就是为什么您不会看到父级发生变化的原因。

解决它的一种方法是创建一个对象数组而不是字符串以使其正常工作：

$scope.directions = [{d: "a"}, {d: "b"}, {d: "c"}];

那么你<input>将是：

<input ng-model="item.d" />

（我认为，另一种方法是使用ng-model=directions[$index]，但由于某种原因，每次按键后它都会失去焦点。

更新：@PSL 表明，如果您添加track by $index)

Answer 2

解决方案#1:绑定对象的属性而不是字符串

您不应该item直接编辑,而是更新项目的属性.

在这里查看一个工作示例:http://jsfiddle.net/ray3whm2/15/

如果您想了解更多信息,请阅读本文:http://nathanleclaire.com/blog/2014/04/19/5-angularjs-antipatterns-and-pitfalls/

基本上,永远不要自己绑定一个属性,而是在绑定中总是有一个点,即item.name代替item.由于javascript本身而不是angularjs,这是一个限制.

解决方案#2:手动更新您的模型

如果您确实需要,可以使用该ng-change指令实际上手动更新阵列.在这里查看一个工作示例:http://jsfiddle.net/ray3whm2/16/