如何根據真假條件過濾ng-repeat數據

對不起，如果這之前已解決，但我找不到一個asnwer。如何根據真假條件過濾ng-repeat數據

我想按照單選按鈕上的選擇對ng-repeat進行排序，但我根本無法知道如何隱藏和顯示ng-repeat中的項目。

一個例子：

HTML：

<form> 
<label><input type="radio" name="generic" />all</label> 
<label><input type="radio" name="generic" />offline</label> 
</form> 

<div ng-repeat="channel in controller.channelArray> 
<div>{{channel.name}}</div> 
</div>

的javascript：

channelArray = []; 
pushStreams(); 

function pushStreams(data) { 
channelArray.push(data) 
}

現在，這只是一個例子，我還沒有測試此代碼，但它的工作原理我的真實代碼。我只是想知道，假設數據包含一個狀態變量，或者是假的，如何顯示所有的（假和真）以及如果我選擇脫機單選按鈕如何過濾出結論。

希望這已經夠清楚了，謝謝！

來源

2017-02-21 MC Mowgli

–

爲此，您可以使用ng-if指令。

ng-if指令根據{expression}刪除或重新創建DOM樹的一部分。

<div ng-repeat="channel in channels"> 
    <div ng-if="validate(channel)">{{channel.name}}</div> 
</div>

function TodoCtrl($scope) { 
 
    $scope.check='All'; 
 
    $scope.channels=[{ 
 
    name:'a', 
 
    status:true 
 
    },{ 
 
    name:'b', 
 
    status:false 
 
    },{ 
 
    name:'c', 
 
    status:false 
 
    },{ 
 
     name:'d', 
 
    status:true 
 
    }]; 
 
    
 
    $scope.validate=function(channel){ 
 
     switch($scope.check){ 
 
     case 'All': 
 
      return true; 
 
     case 'Offline': 
 
      return !channel.status; 
 
     case 'Online': 
 
      return channel.status; 
 
     } 
 
    } 
 
}

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

 
<div ng-app> 
 
    <h2>Todo</h2> 
 
    <div ng-controller="TodoCtrl"> 
 
    <label><input type="radio" name="generic" ng-model="check" value="All" />all</label> 
 
    <label><input type="radio" name="generic" ng-model="check" value="Offline" />offline</label> 
 
    <label><input type="radio" name="generic" ng-model="check" value="Online" />online</label> 
 
    <div ng-repeat="channel in channels"> 
 
     <div ng-if="validate(channel)">{{channel.name}}</div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-02-21 10:20:48

感謝您的快速答覆。啊是的，但這似乎直接針對數據。我想根據單選按鈕選擇顯示/隱藏，還是我誤解了某些內容？ –

Ok..i會在幾分鐘內更新。 –

@MCMowgli，請看我的答案。 –

<form> 
<label><input type="radio" name="generic" ng-model="all" checked />all</label> 
<label><input type="radio" name="generic" ng-model="offline" />offline</label> 
</form> 

<div ng-if="all" ng-repeat="channel in controller.channelArray"> 
<div>{{channel.name}}</div> 
</div> 

<div ng-if="offline" ng-repeat="channel in controller.channelArray | filter :{status:true}"> 
<div>{{channel.name}}</div> 
</div>

您可以使用過濾器爲，如果一切手段第一個div顯示，如果你點擊離線意味着第二個div將會顯示狀態如果您想要更改狀態，則爲true true更改過濾器值也

來源

2017-02-21 10:32:26

首先你要d將ng-model指令的和value屬性添加到您的單選按鈕。該值將存儲在main.selectedFilter變量中（可以在稍後用於過濾器中）。

HTML：

<body ng-controller="MainCtrl as main"> 
    <form> 
    <label><input type="radio" name="generic" ng-model="main.selectedFilter" value="All" />all</label> 
    <label><input type="radio" name="generic" ng-model="main.selectedFilter" value="Offline" />Offline</label> 
    </form> 

    <div ng-repeat="channel in main.channelArray | filter : main.myFilterFunction "> 
     <div>{{ channel.name }}</div> 
    </div> 
    </body>

JS：

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

    var vm = this; 

    vm.selectedFilter = "All"; 

    vm.channelArray = [ 
    { 
     name:'Channel One', 
     status:true 
    }, 
    { 
     name:'Channel Two', 
     status:true 
    }, 
    { 
     name:'Channel Three', 
     status:false 
    }, 
    { 
     name:'Channel Four', 
     status:true 
    } 
]; 

    vm.myFilterFunction = function(value){ 
    return (vm.selectedFilter === "All") || (!value.status); 
    } 

});

Example Plunk

來源

2017-02-21 10:57:03

如何根據真假條件過濾ng-repeat數據

回答

相關問題