부울 속성을 가진 객체 배열이 있습니다. 모두를 표시하고 활성 상태 ( true속성 이름이있는 항목) 및 휴지통 (속성 이름이있는 항목)을 표시 하는 3 단계 드롭 다운이 필요합니다 false. 초기 페이지로드시 기본보기는가있는보기 만 있어야하며 true, 사용자가 모두 표시를 선택하면 true 및 false 값을 표시하고 휴지통을 표시하면 false 값만 표시합니다. 현재 가지고있는 것은 실제 값만 표시되고로드되지만 드롭 다운에서 값을 변경하면 드롭 다운의 모든 값이 제거됩니다. 플 런커
JS
var app = angular.module('plunker', []);
app.controller('FilterController',function($scope){
$scope.data = [{
name: 'darrin',
markedForDelete:true
},{
name: 'megan',
markedForDelete: true
},{
name: 'kim',
markedForDelete:false
},{
name: 'winky',
markedForDelete: false
}];
//show all should show both true and false
//show active should only show true
//show trash should only show false
$scope.filterOptions = [{
name: 'Show all'
},{
name: 'Show active'
},{
name: 'Show trash'
}];
$scope.customFilter = function(data){
if(data.markedForDelete){
return true;
}
if(!data.markedForDelete){
return false;
}
}
$scope.name = "Darrin";
})
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="FilterController">
<input type="text" ng-model="searchText" />
<select ng-model="filterOptions" ng-options="f.name for f in filterOptions"></select>
<div ng-repeat="d in data | filter:customFilter ">{{d.name}}</div>
</div>
</body>
</html>
이와 같은 작업을 수행하는 가장 좋은 방법은 무엇이며 드롭 다운을 변경하면 해당 값이 삭제되는 이유는 무엇입니까?
몇 가지 잘못된 것이 있습니다. 먼저 선택한 필터 옵션을 저장할 위치가 필요합니다.
//Default to first option.
$scope.selectedFilterOption = $scope.filterOptions[0];
HTML
<select ng-model="selectedFilterOption" ng-options="f.name for f in filterOptions"></select>
다음 문제는 사용자 지정 필터가 선택한 필터를 고려하지 않는다는 것입니다. 다음과 같이 변경하십시오.
$scope.customFilter = function(data) {
if ($scope.selectedFilterOption.name == 'Show all')
return true;
else if ($scope.selectedFilterOption.name == 'Show active' && data.markedForDelete == false)
return true;
else if ($scope.selectedFilterOption.name == 'Show trash' && data.markedForDelete == true)
return true;
else
return false;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다