难度与NG模型,NG-重复,和投入 [英] Difficulty with ng-model, ng-repeat, and inputs

查看:107
本文介绍了难度与NG模型,NG-重复,和投入的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想允许用户通过使用 ngRepeat ngModel 编辑项的列表。 (看到这个小提琴)。然而,这两种方法我试过导致怪异的行为:一不更新模型,以及其他模糊每个KEYDOWN形式

I am trying to allow the user to edit a list of items by using ngRepeat and ngModel. (See this fiddle.) However, both approaches I've tried lead to bizarre behavior: one doesn't update the model, and the other blurs the form on each keydown.

我是不是做错了什么吗?这是不支持的用例?

Am I doing something wrong here? Is this not a supported use case?

下面是小提琴的code,复制方便:

Here is the code from the fiddle, copied for convenience:

<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>

推荐答案

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

This seems to be a binding issue.

的建议是不会绑定到元的。

ngRepeat 是遍历集合,里面的字符串时,它应该是在对象迭代。要解决你的问题。

Your ngRepeat is iterating over strings inside a collection, when it should be iterating over objects. To fix your problem

<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/

这篇关于难度与NG模型,NG-重复,和投入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆