[英]ng-class to select button based on condition in ng-repeat
我有下面的代碼，我在其中基於數組值顯示按鈕。 我想根據檢查條件是否與另一個數組值匹配來選擇按鈕。 我添加了一個ng-class來檢查array1循環中是否匹配listApi的i，但是無法給出正確的邏輯並使其正常工作。 請幫忙
<label ng-repeat="i inn array1 track by $index">
<label class="btn-primary" ng-click="array1Selection()">
<span ng-class="{'btn-primary': i.name === listApi[0].name}"></span>
{{i.name}}
</label>
</div>
</label>
我不是100％確定JS的find將在Angular內聯工作，但是是這樣...
<label ng-repeat="i inn array1 track by $index">
<div data-toggle="buttons">
<label class="btn btn-w-m btn-primary" ng-click="array1Selection()">
<div class="itemcontent">
<input type="checkbox" name="array1Select" />
<span nng-class="btn btn-w-m btn-primary: listApi.find(a => a.name === i.name)"></span>
{{i.name}}
</div>
</label>
</div>
</label>
您的span標簽為空，我認為您應該在其中添加{{i.name}} 。 同樣，您不應該在標簽中添加'btn ...'類。 希望這段代碼對您有所幫助。
var app = angular.module("app", []); app.controller("MainCtrl", function($scope) { $scope.array1 = [{ id: 1, name: "abc" }, { id: 1, name: "xyz" }]; $scope.listApi = [{ id: 2, name: "xyz" }]; $scope.existInList = function(itm) { let x = $scope.listApi.findIndex(it => { return it.name == itm.name }); return x == -1 ? false : true; } });
.exists { color: green } .noexists { color: red }
<html ng-app="app"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </head> <body ng-controller="MainCtrl"> <h2>Add class to existing items and others</h2> <label ng-repeat="i in array1"> <div data-toggle="buttons"> <label> <div class="itemcontent"> <input type="checkbox" name="array1Select" /> <span ng-class="{true: 'exists', false: 'noexists'}[existInList(i) === true]"> {{i.name}} </span> </div> </label> </div> </label> <h2>Show only if exists in list</h2> <label ng-repeat="i in array1"> <div data-toggle="buttons"> <label ng-if="existInList(i)"> <div class="itemcontent"> <input type="checkbox" name="array1Select" /> <span> {{i.name}} </span> </div> </label> </div> </label> </body> </html>
一個簡單的修改
var app = angular.module("app", []); app.controller("MainCtrl", function($scope) { $scope.array1 = [{ id: 1, name: "abc" }, { id: 1, name: "xyz" }]; $scope.listApi = [{ id: 2, name: "xyz" }]; $scope.foundInApiList = function(name) { for(var i = 0; i < $scope.listApi.length; i++) if($scope.listApi[i].name == name) return true; return false; } });
.exists { color: green } .noexists { color: red }
<html ng-app="app"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </head> <body ng-controller="MainCtrl"> <label ng-repeat="i in array1 track by $index"> <div data-toggle="buttons"> <label class="btn btn-wm btn-primary" ng-click="array1Selection()"> <div class="itemcontent"> <input type="checkbox" name="array1Select" /> <span class="btn btn-wm btn-primary" ng-class="{true: 'exists', false: 'noexists'}[foundInApiList(i.name)]">{{i.name}}</span> </div> </label> </div> </label> </body> </html>
Angular js ng-class錯誤條件在ng-repeat中不起作用
[英]Angular js ng-class false condition not working in ng-repeat
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.