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

Question

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

Answer 1

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

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

一般来说，当在 ngClicks 中使用表达式而不是像 ng-click="setPerson()" 那样在控制器中使用 $scope.setPerson = function () { ... } 时，您会遇到很多范围继承问题。

请用更高层次的术语说明你想做什么，我会更新我的答案。

编辑

这样的事情对我来说看起来更合乎逻辑。但是，我认为您会遇到很多用户体验问题，因为用户在单击其中一个列表项后无法更改其选择。注意，如果将业务逻辑放在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>

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

见this JSFiddle。

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

Can I set a variable inside ng-repeat?

html

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-click

编辑