如何在AngularJS中添加/删除字符串数组 [英] How to make an Add/Remove Array of strings in AngularJS

问题描述

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

I need to make a data binding to an array of strings.. I need an array of directions.

我以这种方式对其进行模块化：

I module it this way:

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中放入最后一个角度版本的问题）。

Everything works as it was expected, but I have a bug that I can't find. When you try to modified the values directly from the inputs, you are not allow. You write and nothing happened (THIS WAS SOLVED WITH PUTTING THE LAST VERSION OF ANGULAR IN JSFIDDLE).

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

Continue: Now you can modify the values, but they are not updated in the model. If anyone can help me, it would be awesome!!

您可以看到它在此 jsfiddle

推荐答案

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

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

Solution #1: bind an object's property instead of a string

You shouldn't edit item directly, but instead update an attribute of item.

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

See a working example here: http://jsfiddle.net/ray3whm2/15/

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

If you want more information you should read this article: http://nathanleclaire.com/blog/2014/04/19/5-angularjs-antipatterns-and-pitfalls/

基本上，永远不要自己绑定属性，而是在绑定中始终带有一个点，即 item.name 项目。

Basically, never bind a property by itself, instead always have a dot in your bindings, i.e. item.name instead of item. This is a restriction due to javascript itself and not angularjs.

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

If you really need to, you can actually keep your array up to date manually by using the ng-change directive. See a working example here: http://jsfiddle.net/ray3whm2/16/

这篇关于如何在AngularJS中添加/删除字符串数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！