필터가 버튼 클릭의 결과와 일치하는 경우 "표시 할 데이터 없음"경고 메시지를 게시하려는 첨부 된 바이올린을 찾으십시오.
표와 메시지 모두에 대한 조건을 지정하여 클릭이 발생할 때 표시되도록했습니다.
<div ng-show="name===null">No results</div>
링크 클릭을 기준으로 테이블에 만족스러운 데이터가없는 경우 위의 메시지가 표시되어야하며 테이블을 숨겨야합니다. 나는 재산에 따라 조건을 주려고 name했지만 작동하지 않습니다.
바이올린 http://jsfiddle.net/w0L4o8jm/6/ 확인
기본적으로 나는 Fruit. 컨트롤러에서 변경할 수 있습니다.
답을 찾으면 필터에 따라 필터링 된 항목 길이를 계산합니다. 길이가 0이거나 이름이 ''이면 no results. 그렇지 않으면 결과가 표에 표시됩니다. 아래 코드를 바이올린에 붙여넣고 확인하십시오.
<html ng-app="app">
<a ng-click="name = 'Fruit'">Fruit</a>
<a ng-click="name = 'Nut'">Nut</a>
<a ng-click="name = 'Seed'">Seed</a>
<body ng-controller="main">
<a ng-click="name = ''">clear filter</a>
<br> <br> <br>
<div ng-show="(name=='' || !filtered.length)">No results</div>
<div ng-repeat="link in filtered = (links|filter:name)"></div>
<table class="table" ng-show="(filtered.length != 0 && name!='')">
<thead>
<tr>
<th>Target</th>
<th>Level</th>
<tr>
<tbody>
<tr ng-repeat="link in links|filter:name">
<td>
{{link.name}}
</td>
<td>
{{link.category}}
</td>
</tr>
</tbody>
</table>
</body>
컨트롤러 코드
var app = angular.module ( 'app', []);
app.controller('main', function($scope) {
$scope.filters = { };
$scope.name='Fruit';
$scope.links = [
{name: 'Apple', category: 'Fruit'},
{name: 'Pear', category: 'Fruit'},
{name: 'Almond', category: 'Nut'},
{name: 'Mango', category: 'Fruit'},
{name: 'Cashew', category: 'Nut'}
];
});
1.3 이전의 Angular의 경우
결과를 새 변수 (예 : 필터링 됨)에 할당하고 액세스합니다.
<div ng-repeat="link in filtered = (links|filter:name)"></div>
Angular 1.3 이상
별칭 표현식을 사용합니다 (Docs : Angular 1.3.0 : ngRepeat, Arguments 섹션까지 아래로 스크롤) :
<div ng-repeat="link in links|filter:name as filtered"></div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다