AngularJS : 如何更改 ng-repeat 中所有项目的值

Question

我有一个数据模型，默认情况下我给第一个自动收报机 selected 状态为真。

现在，当用户单击另一个项目时，我需要高效地取消select所有其他项目并将所单击项目的 selected 值设置为 true:

<li class="ticker-li"
    ng-repeat="ticker in tickers"
    ng-hide="ticker.removed"
    ng-class="{'selected':ticker.selected}"
    ng-mouseleave="hideTickerOptions()">

    <div class="ticker"
         ng-click="unselectAll(); ticker.selected = !ticker.selected;
                   selectTicker(ticker);">
         {{ticker.ticker}}
    </div>
</li>

在这里尝试了 forEach 函数，但出现错误 [object Array] is not a function:

var vs = $scope;

vs.unselectAll = function() {
   vs.tickers.forEach(vs.tickers, function(ticker) {
       ticker.selected = false;
   });
};

常规的 for 循环可以工作，但它是将所有 selected 值切换为 false 的有效方法吗？

for (var i = 0; i < vs.tickers.length; i++) {
    vs.tickers[i].selected = false;
}

我的想法是运行这个 unselectAll 函数去 select 一切，然后标记中的下一个代码 select 当前项目：

<div class="ticker"
     ng-click="unselectAll(); ticker.selected = !ticker.selected;
               selectTicker(ticker);">
     {{ticker.ticker}}
</div>

Answer 1

foreach 的效率不会低于 angular 可以做的任何事情 'for free'。无论哪种方式，它都必须将其他设置为未选中..

我建议的是拥有一个东西 "selectedItem" 和一组东西 "items"。

那么你可以'say'

<li class="ticker-li"
    ng-repeat="ticker in tickers"
    ng-hide="ticker.removed"
    ng-class="{'selected':ticker == selectedTicker}"
    ng-mouseleave="hideTickerOptions()">

    <div class="ticker" ng-click="selectedTicker = ticker">
         {{ticker.ticker}}
    </div>
</li>

然后您可以访问 selectedTicker 以获取它的属性

<div>{{selectedTicker.name}}</div>

Answer 2

如果您设置为使用 ticker.selected，您可以使用 jquery.each 循环来取消选择所有选项。

$scope.selectTicker = function(ticker)
{
  //deselect all tickers
  $.each(tickers, function() { this.selected = false; });

  //select the ticker you passed in
  ticker.selected = true;
}

在您看来：

<div class="ticker"ng-click="selectTicker(ticker);">
     {{ticker.ticker}}
</div>

Answer 3

我尝试使用无线电输入来做到这一点。

 var app = angular.module('AppForm', []);

app.controller('ctrForm', function ($scope) {

        $scope.choices = [
            { id: 'Choice1', check: false },
            { id: 'Choice2', check: false },
            { id: 'Choice3', check: false },
            { id: 'Choice4', check: false },
            { id: 'Choice5', check: false },
            { id: 'Choice6', check: false },
            { id: 'Choice7', check: false }
        ];

        $scope.setDefault = function (item) {
            angular.forEach($scope.choices, function (p) {
                p.check = false; //set them all to false
            });
            item.check = true; //set the clicked one to true
        };
        
    });

.selected {
        background-color: yellow;
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div ng-app="AppForm" ng-controller="ctrForm">
        <ul>
            <li style="list-style:none" ng-class="{'selected':item.check}" ng-repeat="item in choices"><input type="radio" name="group" ng-model="item.check" ng-click="setDefault(item)" value="true" />{{item.id}}...{{item.check}}</li>
        </ul>
    </div>

AngularJS : 如何更改 ng-repeat 中所有项目的值

AngularJS : How to change a value in all items in an ng-repeat

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-model