且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-10-06 20:31:28

我不喜欢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>