I have a data model that comes in, by default I give the first ticker a selected status of true.
我有一个数据模型,默认情况下我给第一个自动收报机选择状态为true。
Now when a user clicks another item, I need to efficiently deselect all the others and set the selected value to true for the item clicked:
现在,当用户点击另一个项目时,我需要有效地取消选择所有其他项目,并为所点击的项目将所选值设置为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>
Tried a forEach
function here, but with the error [object Array] is not a function
:
在这里尝试了一个forEach函数,但是错误[object Array]不是函数:
var vs = $scope;
vs.unselectAll = function() {
vs.tickers.forEach(vs.tickers, function(ticker) {
ticker.selected = false;
});
};
A regular for-loop will work, but is it an efficient way to toggle all the selected values to false?
常规的for循环可以工作,但它是一种将所有选定值切换为false的有效方法吗?
for (var i = 0; i < vs.tickers.length; i++) {
vs.tickers[i].selected = false;
}
My thinking here is run this unselectAll function to deselect everything, then the next code in the markup which select the current item:
我的想法是运行这个unselectAll函数取消选择所有内容,然后选择当前项目的标记中的下一个代码:
<div class="ticker"
ng-click="unselectAll(); ticker.selected = !ticker.selected;
selectTicker(ticker);">
{{ticker.ticker}}
</div>
3 个解决方案
#1
I tried to do it using radio inputs.
我尝试使用无线电输入。
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>
#2
The foreach wouldn't be less efficient than anything angular could do 'for free'. Either way it'll have to set the others as unselected..
foreach的效率不会低于角度可以“免费”做的任何事情。无论哪种方式,它都必须将其他人设置为未选中的..
What'd I'd propose instead would be to have a single thing "selectedItem" and a set of things "items".
我建议的是将一件事“selectedItem”和一组东西“物品”。
then you can '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>
you could then access selectedTicker to get it's properties
然后你可以访问selectedTicker来获取它的属性
<div>{{selectedTicker.name}}</div>
#3
If your set on using ticker.selected, you can use a jquery .each loop to unselect all of them.
如果您使用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;
}
and in your view:
在你看来:
<div class="ticker"ng-click="selectTicker(ticker);">
{{ticker.ticker}}
</div>
#1
I tried to do it using radio inputs.
我尝试使用无线电输入。
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>
#2
The foreach wouldn't be less efficient than anything angular could do 'for free'. Either way it'll have to set the others as unselected..
foreach的效率不会低于角度可以“免费”做的任何事情。无论哪种方式,它都必须将其他人设置为未选中的..
What'd I'd propose instead would be to have a single thing "selectedItem" and a set of things "items".
我建议的是将一件事“selectedItem”和一组东西“物品”。
then you can '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>
you could then access selectedTicker to get it's properties
然后你可以访问selectedTicker来获取它的属性
<div>{{selectedTicker.name}}</div>
#3
If your set on using ticker.selected, you can use a jquery .each loop to unselect all of them.
如果您使用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;
}
and in your view:
在你看来:
<div class="ticker"ng-click="selectTicker(ticker);">
{{ticker.ticker}}
</div>