如何在 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>

一切都按预期工作，但我有一个我找不到的错误。当您尝试直接从输入修改值时，您是不允许的。你写了，什么也没发生（这是通过将最新版本的 Angular 放入 JSFIDDLE 中解决的）。

继续：现在您可以修改这些值，但它们不会在模型中更新。如果有人可以帮助我，那就太棒了！

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

Answer 1

在绑定到原语时，旧版本的 Angular 存在问题。看到这个SO question

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

ng-repeat 创建一个子作用域。因为ng-repeat="item in directions" 中的item 是一个原语（即字符串），所以<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/