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

Question

我需要对字符串数组进行数据绑定(bind)。我需要方向数组。

我是这样模块化的:

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

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

您不应该直接编辑 item，而应该更新 item 的属性。

请在此处查看工作示例:http://jsfiddle.net/ray3whm2/15/

如果您想了解更多信息，您应该阅读这篇文章:http://nathanleclaire.com/blog/2014/04/19/5-angularjs-antipatterns-and-pitfalls/

基本上，永远不要单独绑定(bind)属性，而是始终在绑定(bind)中添加一个点，即 item.name 而不是 item。这是由于 javascript 本身而不是 angularjs 造成的限制。

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

如果确实需要，您实际上可以使用 ng-change 指令手动更新数组。请在此处查看工作示例:http://jsfiddle.net/ray3whm2/16/