Question

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

<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。这样它就会显示用户选择的内容，但他们可以通过键入框来编辑它。

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

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

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

<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' is targeting all my ng-model s and not each that associate to its。编辑. 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。我选择的选项。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: