微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我试图允许用户使用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>

jsfiddlehttp://jsfiddle.net/jaimem/rnw3u/5/

原文地址:https://www.jb51.cc/angularjs/147137.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐