을 사용하여 li에 데이터를 표시하는 컨트롤러를 만듭니다.컨트롤러의 ng-repeat에 대한 사용자 정의 필터
데이터에는 filter이라는 변수가 있으며 데이터를 분류하는 데 사용됩니다. 이제이 변수를 기반으로 li을 필터링하고 단추를 사용하여이를 수행하려고합니다.
하지만 필터를 컨트롤러의 데이터에 연결하는 방법을 모르겠습니다. 내가 만들 plunkr하기에 : plunkr
currentFilter로 filter 업데이트이currentFilter.filter을 기본값이 "응용 프로그램"하는 필터링 할 개체의 속성을 필터에 알립니다.currentFilter.filter을 설정 범위에 함수로 묶여. 기본적으로 strict는 false이고 술어처럼 작동합니다.각 문서 : https://docs.angularjs.org/api/ng/filter/filter#example
var app = angular.module('plunker', []);
app
.controller('isotopeCtrl', isotopeFunction);
function isotopeFunction($scope) {
$scope.names = ['website-1', 'website-2', 'app-1', 'psd-1', 'psd-2', 'psd-3'];
$scope.currentFilter = {
filter: 'app'
};
$scope.data = [{
name: 'website-1',
filter: 'website'
},
{
name: 'website-2',
filter: 'website'
},
{
name: 'app-1',
filter: 'app'
}
];
$scope.setFilter = function(filter) {
$scope.currentFilter.filter = filter;
};
console.log($scope.names);
}<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="isotopeCtrl">
<h2>Simple Data</h2>
<ul>
<li ng-repeat="item in data">
<div>{{ item.name }}</div>
</li>
</ul>
<h2>Using Filter</h2>
<p>Here I used a dynamic filter - {{ currentFilter.filter }})</p>
<ul>
<li ng-repeat="item in data | filter:currentFilter:true">
<div>{{ item.name }}</div>
</li>
</ul>
Filters
<button ng-click="setFilter('app')">app</button>
<button ng-click="setFilter('website')">website</button>
</body>
</html>
프로그래머 당신의 plunkr 친구 없음 NG 반복. 이것은 AngularJS 파일 리더 예입니다. – Bowofola
@Bowofola 안녕하세요, 저는 링크를 편집합니다. –
내 대답은 작동 했습니까? – Bowofola