本文介绍了在Angularjs中,如何使用ng-repeat,ng-model和ng-click动态更改内容?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

例如,我从这样的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动态更改内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 02:32