在Angularjs中，如何使用ng-repeat，ng-model和ng-click动态更改内容？ [英] In Angularjs, how do I use ng-repeat, ng-model, and ng-click to dynamically change content?
问题描述
例如，我从这样的html开始：
As an example, I'm starting with html like this:
<div id="leftSide">
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
</div>
这个想法是，当我选择一个项目，即 .choice 我想将它添加到输入和 .theChoice 。这样它就会显示用户选择的内容，但是可以通过键入框来编辑它。
The idea being, when I select an item i.e. .choice I want to add it to the input and the .theChoice. This way it displays what the user chose but they can edit it by typing the box.
我知道如何使用jquery执行此操作。但是，这将是一个很大的开销，我想学习角度。我也知道Angular可以真正清理它。
I know how to do this with jquery. However, it will be a lot of overhead and I want to learn angular. I also know Angular can really clean this up.
我使用 ng-model 来镜像用户输入框中的类型执行此操作：
I've used ng-model to mirror what a user types in the input box doing this:
<div id="leftSide">
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" ng-model="choice1" />
</div>
<p class="theChoice">{{choice1}}</p>
</div>
...
</div>
我使用ng-repeat来循环输出 .item中的三个 divs：
I've used ng-repeat to loop out three of the .item divs:
<div id="leftSide" ng-controller="leftSide">
<div class="item" ng-g-repeat="i in getNumber(number) track by $index">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" ng-model="choice1" />
</div>
<p class="theChoice">{{choice1}}</p>
</div>
...
</div>
和js：
myApp.controller('leftSide',function($scope,$index){
//three left boxes
$scope.number = 3;
$scope.getNumber = function(num) {
return new Array(num);
}
...
});
我遇到的问题（显然）是选择 .choice'定位我的所有 ng-model ，而不是每个与 .editor 相关联的。我确定我可以使用 $ index 来处理这个和/或可能是ng-click。基于我选择的 .choice`，我只是有点迷失了如何定位正确的那个。
The problem I have is (obviously) selecting the .choice' is targeting all myng-models and not each that associate to its.editor. I'm certain I can use$indexto handle this and/or maybe ng-click. I'm just a little lost on how to target the correct one based on the.choice` I select.
推荐答案
我不喜欢jQuery实现，所以我尝试通过纯AngularJS来解决你的问题。您可以运行代码段来检查答案：
I don't like the jQuery implementation, so I tried to solve your problem by pure AngularJS. You can run the snippet to check the answer:
var app = angular.module('my-app', [], function() {
})
app.controller('AppController', function($scope) {
$scope.number = 3;
$scope.choice = [];
$scope.getNumber = function(num) {
return new Array(num);
}
$scope.choiceClick = function(i) {
debugger;
$scope.choice[i] = 'This is choice';
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="my-app" ng-controller="AppController">
<div class="item" ng-repeat="it in getNumber(number) track by $index">
<div class="editor">
<ul class="choices">
<li class="choice" ng-click="choiceClick($index)">This is choice</li>
</ul>
<input class="myChoice" ng-model="choice[$index]" />
</div>
<p class="theChoice">{{choice[$index]}}</p>
</div>
</body>
这篇关于在Angularjs中，如何使用ng-repeat，ng-model和ng-click动态更改内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
