javascript 我可以在 ng-repeat 中设置一个变量吗？

Can I set a variable inside ng-repeat?

提问by Brendan

I have an application that has two forms that are lists of buttons and a form with a list of labels. I choose a person, choose a phone, and on the third form I show a list of phones and their associated people (location). Is it possible to set a variable with ng-clickinside an ng-repeatblock? I tried settings a variable _person to be equal to the the button text, which would be {{person}}, but _person doesn't seem to be set to anything when I print it on the next form. I'm also not sure if I used ng-initcorrectly in the first <div>, and should I be using ng-modelat all?

我有一个应用程序，它有两个表单，即按钮列表和一个带有标签列表的表单。我选择一个人，选择一个电话，然后在第三个表格中显示电话列表及其相关人员（位置）。是否可以ng-click在ng-repeat块内设置变量？我尝试将变量 _person 设置为等于按钮文本，这将是{{person}}，但是当我在下一个表单上打印时 _person 似乎没有设置为任何内容。我也不确定我ng-init在第一个中是否正确<div>使用ng-model，我应该使用吗？

<div ng-init="showSelectUser=true; _person=''">
<div class="selectUser" ng-show="showSelectUser">
    <h2>Who are you?</h1>
    <ul ng-click="showSelectUser=false; showDeviceForm=true;">
      <li ng-repeat="person in people">
        <a href="#" role="button" ng-click="_person={{person}}">{{person}}</a>
      </li>
    </ul>
  </div>

  <div class="selectDevice" ng-show="showDeviceForm" ng-click="showDeviceForm=false; showDeviceList=true">
    <p>person: {{_person}}</p>
    <h2>Which phone?</h2>
    <ul>
      <li ng-repeat="device in devices">
        <a class="btn btn-default" href="#" role="button" ng-click="device.location=_person">{{device.name}}</a>
      </li>
    </ul>
  </div>

  <div class="devicesView" ng-show="showDeviceList">
    <ul>
      <li ng-repeat="device in devices">
        <h3>{{device.name}}</h3>
        <h4 class="deviceLocation">{{device.location}}</h4>
      </li>
    </ul>
  </div>
</div>



angular.module('devicesApp')
  .controller('MainCtrl', function ($scope) {
    $scope.devices = [
        {name: 'iPhone 4', location: 'Desk'},
        {name: 'iPhone 5', location: 'Desk'},
        {name: 'iPhone 6', location: 'Desk'},
    ];

    $scope.people = [
        'John',
        'Scott',
        'Adam'
    ];
});

回答by Frank van Wijk

The ngRepeat directive creates a new scope, so if you have ng-click="device.location=_person"the devicemodel will be created in that scope if it not exists. So make sure that devicealready exists in a parent scope, for example by setting $scope.device = {}in your controller.

该ngRepeat指令创建一个新的范围，所以如果你有ng-click="device.location=_person"该device模型将在该范围内创建如果不存在的话。因此，请确保device已存在于父作用域中，例如通过$scope.device = {}在您的控制器中进行设置。

_personis undefined, because it is defined in the innerscope of the ng-repeat="person in people". Currently your ng-click sets every device location to undefined.

_person未定义，因为它是在定义内的范围ng-repeat="person in people"。目前，您的 ng-click 会将每个设备位置设置为undefined.

In general you will have a lot of scope inheritance issues when using expressions in ngClicks instead of doing something like ng-click="setPerson()"and have $scope.setPerson = function () { ... }in your controller.

通常，在 ngClicks 中使用表达式而不是在控制器中执行类似ng-click="setPerson()"和拥有的操作时$scope.setPerson = function () { ... }，您会遇到很多范围继承问题。

Please clarify what you want to do in more high level terms and I will update my answer.

请用更高级的术语阐明您想做什么，我会更新我的答案。

Edit

编辑

Something like this looks more logical for me. However, I think you will have a lot of UX issues because the user is not able to change its choice after clicking one of the list items. Note that if you put business logic in JS files instead of templates, it is easier to test.

这样的事情对我来说看起来更合乎逻辑。但是，我认为您会遇到很多 UX 问题，因为用户在单击列表项之一后无法更改其选择。注意，如果将业务逻辑放在 JS 文件中而不是模板中，则更容易测试。

 <div ng-app="devicesApp" ng-controller="MainCtrl">
    <div class="selectUser" ng-show="step === 'step1'">
        <h2>Who are you?</h2>
        <ul>
            <li ng-repeat="person in people">
                <a href="#" role="button" ng-click="selectPerson(person)">{{person}}</a>
            </li>
        </ul>
    </div>
    <div class="selectDevice" ng-show="step === 'step2'">
        <p>person: {{selected.person}}</p>
         <h2>Which phone?</h2>

        <ul>
            <li ng-repeat="device in devices"> <a class="btn btn-default" href="#" role="button" ng-click="selectDevice(device)">{{device.name}}</a>

            </li>
        </ul>
    </div>
    <div class="devicesView" ng-show="step === 'step3'">
        <ul>
            <li ng-repeat="device in devices">
                 <h3>{{device.name}}</h3>

                 <h4 class="deviceLocation">{{device.location}}</h4>

            </li>
        </ul>
    </div>
</div>

In JS file:

在JS文件中：

angular.module('devicesApp', []).controller('MainCtrl', function ($scope) {
    $scope.devices = [{
        name: 'iPhone 4',
        location: 'Desk'
    }, {
        name: 'iPhone 5',
        location: 'Desk'
    }, {
        name: 'iPhone 6',
        location: 'Desk'
    }, ];

    $scope.people = [
        'John',
        'Scott',
        'Adam'];

    $scope.selected = {};
    $scope.step = 'step1';

    $scope.selectPerson = function (person) {
        $scope.selected.person = person;
        $scope.step = 'step2';
    };

    $scope.selectDevice = function (device) {
        device.location = $scope.selected.person;
        $scope.step = 'step3';
    }
});

See this JSFiddle.

看到这个 JSFiddle。