angularjs – ng-model,ng-repeat和输入的难度

发布时间：2020-12-17 09:13:18 所属栏目：安全来源：网络整理

导读：我试图允许用户使用ngRepeat和ngModel编辑项目列表。 ( See this fiddle.)然而，我尝试的两种方法导致奇怪的行为：一个不更新模型，其他模糊每个键下的形式。我在这里做错了吗？这不是一个支持的用例吗？这里是从小提琴的代码，为了方便复制： html ng-app

我试图允许用户使用ngRepeat和ngModel编辑项目列表。 ( See this fiddle.)然而，我尝试的两种方法导致奇怪的行为：一个不更新模型，其他模糊每个键下的形式。

我在这里做错了吗？这不是一个支持的用例吗？

这里是从小提琴的代码，为了方便复制：

<html ng-app>
    <head>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body ng-init="names = ['Sam','Harry','Sally']">
        <h1>Fun with Fields and ngModel</h1>
        <p>names: {{names}}</p>
        <h3>Binding to each element directly:</h3>
        <div ng-repeat="name in names">
            Value: {{name}}
            <input ng-model="name">                         
        </div>
        <p class="muted">The binding does not appear to be working: the value in the model is not changed.</p>
        <h3>Indexing into the array:</h3>
        <div ng-repeat="name in names">
            Value: {{names[$index]}}
            <input ng-model="names[$index]">                         
        </div>
        <p class="muted">Type one character,and the input field loses focus. However,the binding appears to be working correctly.</p>
    </body>
</html>

这似乎是一个具有约束力的问题。

建议是don’t bind to primitives。

你的ngRepeat是迭代集合中的字符串，当它应该迭代对象。修复您的问题

<body ng-init="models = [{name:'Sam'},{name:'Harry'},{name:'Sally'}]">
    <h1>Fun with Fields and ngModel</h1>
    <p>names: {{models}}</p>
    <h3>Binding to each element directly:</h3>
    <div ng-repeat="model in models">
        Value: {{model.name}}
        <input ng-model="model.name">                         
    </div>

jsfiddle：http://jsfiddle.net/jaimem/rnw3u/5/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!