在Angularjs中，如何使用ng-repeat，ng-model和ng-click动态更改内容？

作为一个例子，我开始使用这样的html：

 
 
 
 
This is choice
 
  
 
 
 
 
 
 
This is choice
 
  
 
 
 
 
 
 
This is choice
 
  
 
 
  

这个想法是，当我选择一个项目，即.choice我想将它添加到输入和.theChoice 。 这样它会显示用户选择的内容，但可以通过键入框来编辑它。

我知道如何用jquery做到这一点。 但是，这将是一个很大的开销，我想学习角度。 我也知道Angular可以真正清理它。

我使用ng-model镜像用户在输入框中输入的内容：

 
 
 
 
 
This is choice
 
  
 
{{choice1}}
 
 ...  

我使用ng-repeat来循环出三个.item div：

 
 
 
 
 
This is choice
 
  
 
{{choice1}}
 
 ...  

和js：

 myApp.controller('leftSide',function($scope,$index){ //three left boxes $scope.number = 3; $scope.getNumber = function(num) { return new Array(num); } ... }); 

我的问题是（显然）选择.choice' is targeting all my ng-model s and not each that associate to its .editor s and not each that associate to its . I'm certain I can use . I'm certain I can use $ index to handle this and/or maybe ng-click. I'm just a little lost on how to target the correct one based on the to handle this and/or maybe ng-click. I'm just a little lost on how to target the correct one based on the我选择to handle this and/or maybe ng-click. I'm just a little lost on how to target the correct one based on the .choice，我to handle this and/or maybe ng-click. I'm just a little lost on how to target the correct one based on the 。

Answer 1

我不喜欢jQuery实现，所以我尝试通过纯AngularJS来解决你的问题。 您可以运行代码段来检查答案：

 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'; } }) 

   
 
 
 
This is choice
 
  
 
{{choice[$index]}}