Question

我刚开始使用Angular。

我编写了一些代码，用于下载JSON数组configuredAPIs并显示其中的每个对象<div ng-repeat="capi in configuredAPIs">。对于其中的每一个，还有另一个指令来列出字符串数组中的项目<tr ng-repeat="eurl in capi.externalURLs">

在其下方有一个文本框，用于向此数组添加新字符串，我已将其绑定到名为$scope的{{1}}变量。

当我点击“添加＆＃39;按钮，一切正常 - 新的字符串被添加到数组中，表中会出现一个新行..但它只能工作一次。随后点击“添加＆＃39;按钮将空字符串添加到数组（因此为空文本框）。

我做错了什么？

的index.html

url

controller.js

    <div ng-app="testApp" ng-controller="testCtrl">

        <div ng-repeat="capi in configuredAPIs">

            <h1>Configured API</h1>
            <p>
                Name:
                {{ capi.name }}
            </p> 

            <h2>External URLs</h2>
            <form ng-submit="addExternalURL(capi)">
                <table>
                    <!-- A row in the table for each string in the array -->
                    <tr ng-repeat="eurl in capi.externalURLs">
                        <td>
                            <input type="text" ng-model="eurl" />
                        </td>
                    </tr>

                    <!-- Final table row to add a new string to the array -->
                    <tr>
                        <td>
                            <input type="text" ng-model="url" placeholder="Enter a new external URL">
                            <input class="btn-primary" type="submit" value="add">
                        </td>
                    </tr>
                </table>
            </form>

        </div>
    </div>

Answer 1

这是因为AngularJS不会像人们明显认为的那样观看和更新基元（例如字符串，数字，布尔值）。

因此，您可以将带有值的对象绑定到作用域，或使用返回原始值的函数。

请参阅：

https://github.com/angular/angular.js/wiki/Understanding-Scopes

http://www.codelord.net/2014/05/10/understanding-angulars-magic-dont-bind-to-primitives/

使用对象的示例（在控制器处）：

$scope.primitives = {
    url : 'foo://'
}

在模板中：

<input type="text" ng-model="primitives.url">

因此，您的示例中发生的情况是，一旦将其设置为''，模板中模型的更改将不再被识别。

为什么我的Angular＆＃39;添加＆＃39;按钮只工作一次？

1 个答案: