Angularjs ng模型、ng重复和输入的困难_Angularjs_Angularjs Ng Repeat_Angularjs Ng Model

Angularjs ng模型、ng重复和输入的困难

angularjs

Angularjs ng模型、ng重复和输入的困难,angularjs,angularjs-ng-repeat,angularjs-ng-model,Angularjs,Angularjs Ng Repeat,Angularjs Ng Model,我试图允许用户使用ngRepeat和ngModel编辑项目列表。（.）然而，我尝试过的两种方法都会导致奇怪的行为：一种不更新模型，另一种在每个向下键上模糊表单我做错什么了吗？这不是一个受支持的用例吗这是小提琴上的代码，为了方便复制： <html ng-app> <head> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combine

我试图允许用户使用

ngRepeat

和

ngModel

编辑项目列表。（.）然而，我尝试过的两种方法都会导致奇怪的行为：一种不更新模型，另一种在每个向下键上模糊表单

我做错什么了吗？这不是一个受支持的用例吗

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

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


与领域和模式的乐趣
名称：{{names}
直接绑定到每个元素：
值：{{name}
绑定似乎不起作用：模型中的值没有更改
索引到数组中：
值：{{names[$index]}
键入一个字符，输入字段将失去焦点。但是，绑定似乎工作正常

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

建议是

您的

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>


与领域和模式的乐趣
名称：{{models}}
直接绑定到每个元素：
值：{{model.name}

jshiddle:

当需要了解如何以及如何工作时，你会陷入一个困难的境地。还可以尝试使用1.0.3版本。你的例子会有点不同

您可以简单地使用jm提供的解决方案-

但如果你想更深入地处理这种情况，你必须了解：

)
作用域具有层次结构
ngRepeat为每个元素创建新的范围
ngRepeat使用附加信息构建项目缓存（hashKey）；在每个新项（不在缓存中）的每次监视调用中，ngRepeat构造新的作用域、DOM元素等
根据1.0.3 ngModelController，使用实际模型值重新加载输入

AngularJS 1.0.3的示例“直接绑定到每个元素”的工作原理：

在输入中输入字母
```
'f'
```

ngModelController

更改项目范围的模型（名称数组未更改）=>

name=='Samf'

，

name=='Sam'，'Harry'，'Sally']

```
$digest
```
循环启动
```
ngRepeat
```
将项目范围（
```
'Samf'
```
）中的模型值替换为未更改名称数组（
```
'Sam'
```
）中的值
```
ngModelController
```
使用实际模型值重新加载输入（
```
'Sam'
```
）

示例“索引到数组”的工作原理：

在输入中输入字母
```
'f'
```
```
ngModelController
```
更改名称中的项
```
array
```
=>`names=['Samf'、'Harry'、'Sally']
$digest循环启动
```
ngRepeat
```
在缓存中找不到
```
'Samf'
```
```
ngRepeat
```
创建新的作用域，使用新输入添加新的div元素（这就是为什么输入字段失去焦点-使用旧输入的旧div被使用新输入的新div替换）
将呈现新DOM元素的新值

另外，您可以尝试使用并查看如何使用您输入的输入更改div作用域的$id。

我刚刚将AngularJs更新为1.1.2，没有问题。我想这个错误已经修复了

我尝试了上面的解决方案，但效果很好。谢谢

以下是我的观点：

var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
    $scope.models = [{
        name: 'Device1',
        checked: true
    }, {
        name: 'Device1',
        checked: true
    }, {
        name: 'Device1',
        checked: true
    }];

}

还有我的HTML

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
         <h1>Fun with Fields and ngModel</h1>
        <p>names: {{models}}</p>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th></th>
                    <th>Feature 1</td>
                    <th>Feature 2</th>
                    <th>Feature 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Device</td>
                   <td ng-repeat="modelCheck in models" class=""> <span>
                                    {{modelCheck.checked}}
                                </span>

                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label">Which devices?</label>
                    </td>
                    <td ng-repeat="model in models">{{model.name}}
                        <input type="checkbox" class="checkbox inline" ng-model="model.checked" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>


与领域和模式的乐趣
名称：{{models}}
特征1
专题2
专题3
装置
{{modelCheck.checked}
哪些设备？
{{model.name}

使用Angular最新版本（1.2.1）并通过

$index

跟踪。这个问题已经解决了


值：{{name}

如果不需要模型随每个按键笔划更新，只需绑定到

名称

，然后在模糊事件中更新数组项：

<div ng-repeat="name in names">
    Value: {{name}}
    <input ng-model="name" ng-blur="names[$index] = name" />
</div>


值：{{name}

如何执行以下操作：

<select ng-model="myModel($index+1)">

在我的检查员元素中：

<select ng-model="myModel1">
...
<select ng-model="myModel2">

...

问题似乎在于

ng model

如何与

input

一起工作，并覆盖

名称

对象，使其在

ng repeat

中丢失

作为解决方法，可以使用以下代码：

<div ng-repeat="name in names">
    Value: {{name}}
    <input ng-model="names[$index]">                         
</div>


值：{{name}

希望能有所帮助

感谢第一个超链接，因为它解释了模糊/失焦/闪烁问题。我一直想知道为什么会这样。谢谢你，我帮了很多忙。尽管如此，绑定到原语在我看来还是应该存在的。以前的帖子，但是thnx，我花了一些时间发现了“不改变ngRepeat内部的模型”的问题，你的建议是不要绑定到原语所以：不要在键入时修改整个列表-我掉进了一个陷阱。我一直在观察集合的变化，并用一个相同的副本替换它-因此，即使我没有绑定到原语，元素也会被重新创建。这与非常相似，但第二种方法在这里是新的，因此它不完全是重复的。我在那里提供了一个详细的答案（类似于Artem的答案），

<div ng-repeat="name in names">
    Value: {{name}}
    <input ng-model="names[$index]">                         
</div>