반응형
ng-show(어레이 길이가 0일 경우)
저는 AngularJS 초보자입니다.필터 처리 중에 "ng-show"를 사용하여 "No Tag Found"를 표시하려고 합니다.
JS:
function simpleController($scope)
{
$scope.tags = ['HTML','CSS','Jquery','Bootstrap','AngularJS'];
}
HTML:
<div ng-controller="simpleController">
<input class="txt" type="text" ng-model="nameText" />
<div>
<ul>
<li ng-repeat="myKeys in tags| filter:nameText">{{myKeys}}</li>
</ul>
<div ng-show="!tags.length">No Tag Found</div>
</div>
</div>
어레이 값 이외의 값을 입력하면 위의 코드를 사용하여 "No Tag Found" (태그를 찾을 수 없습니다)가 표시되지 않습니다.제발 도와주세요.감사해요.
필터링을 하고 있는 경우ng-repeat, 같은 필터를 적용할 필요가 있습니다.ng-show그렇지 않으면ng-show는 항상 풀 어레이를 참조합니다.
<div ng-show="!(tags| filter:nameText).length">No Tag Found</div>
현용 바이올린 : http://jsfiddle.net/HB7LU/3149/
ng-hide를 사용하는 것이 좋습니다.
<div ng-hide="tags.length">No Tag Found</div>
<div class="box" ng-show="team_stores.length > 0" >
나를 위해 일했다
필터를 쉽게 만드는 방법...데모 내용은 다음과 같습니다.
var app = angular.module('myApp', []);
app.controller('myctrl', function ($scope) {
$scope.friends = [
{ name: "Peter", age: 20 },
{ name: "Pablo", age: 55 },
{ name: "Linda", age: 20 },
{ name: "Marta", age: 37 },
{ name: "Othello", age: 20 },
{ name: "Markus", age: 32 }
];
});<!DOCTYPE html>
<html>
<head>
<title>welcome</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myctrl">
Name: <input ng-model="filter" type="text" />
<ul>
<li ng-repeat="friend in friends |filter:filter">{{friend.name}}</li>
<li ng-show="!(friends| filter:filter).length">data not found</li>
<!--<link ng-repeat="friend in friends|filter:isActive ">-->
</ul>
</body>
</html>또, 다음과 같이 필터 서비스를 사용할 수도 있습니다.$filter('filter')(array, expression, comparator)이 서비스는 새로운 어레이를 반환합니다.
http://code.angularjs.org/1.2.16/docs/api/ng/filter/filter 를 참조할 수 있습니다.
언급URL : https://stackoverflow.com/questions/23076570/ng-show-when-array-length-is-zero
반응형
'programing' 카테고리의 다른 글
| 정의되지 않은 함수 curl_version 호출 (0) | 2023.03.28 |
|---|---|
| Java에서 JSON 문자열로 지정된 이름과 값을 찾으려면 어떻게 해야 합니까? (0) | 2023.03.28 |
| 각도에서의 오류 처리JS http get 후 구성 (0) | 2023.03.28 |
| WordPress 테마 개발 - 템플릿 엔진 (0) | 2023.03.28 |
| mysql과 oracle sql의 주요 차이점은 무엇입니까? (0) | 2023.03.28 |