角JS - 显示消息如果异常重复是空的 [英] Angular js - Show message if ng-repeat is empty

问题描述

以下AngularJS应用程序正在与NG-重复和应用的过滤器。某应用过滤器没有留下left值。我怎样才能显示通知？

爵士小提琴

HTML

 ＆LT; D​​IV＆GT;
＆LT; D​​IV数据-NG-控制器=myCtrl＆GT;
    ＆LT; UL＆GT;
        ＆LT;李数据-NG-重复=项的值|过滤器：filterIds（）＆GT;
            ＆LT; code＆GT;＃{{item.id}}＆LT; / code＆GT;项目
        ＆LT; /李＆GT;
    ＆LT; / UL＆GT;    ＆LT; p NG秀=values​​.length！＆gt;在此滤波器LT无丘壑; / P＆GT;
    ＆LT;按钮NG点击=loadNewFilter（）＆GT;现在＆LT过滤; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

AngularJS

  VAR应用= angular.module（'M'，[]）;app.controller（'myCtrl'，函数（$范围）{
$ scope.values​​ = [{
    ID：1
} ....
}];$ scope.filter = [1,2,3,4,5,6]$ scope.filterIds =功能（IDS）{
        复位功能（项目）{
            VAR过滤器= $ scope.filter;                 返回filter.indexOf（item.id）== -1！;
        }
 }$ scope.loadNewFilter =功能（）{
    $ scope.filter = [-1];
    $ $范围适用于（）。
}}）;
 

解决方案

我认为这是你想要什么：

 ＆LT; D​​IV＆GT;
    ＆LT; D​​IV数据-NG-控制器=myCtrl＆GT;
        ＆LT; UL＆GT;
            ＆LT;李数据-NG-重复=在testValue项=（值|过滤器：filterIds（））＆GT;
                ＆LT; code＆GT;＃{{item.id}}＆LT; / code＆GT;项目
            ＆LT; /李＆GT;
        ＆LT; / UL＆GT;        ＆LT; p NG秀=testValue.length！＆gt;在此滤波器LT无丘壑; / P＆GT;
        ＆LT;按钮NG点击=loadNewFilter（）＆GT;现在＆LT过滤; /按钮＆GT;
    ＆LT; / DIV＆GT;
 

过滤值后，结果存储在 testValue 。所以每当你更换过滤器，testValue'也改变了。

  VAR应用= angular.module（'M'，[]）;app.controller（'myCtrl'，函数（$范围）{
    $ scope.values​​ = [{
        ID：1
    }，{
        ID：2
    }，{
        ID：3
    }，{
        ID：4
    }，{
        ID：5
    }，{
        ID：6
    }];    $ scope.filter = [1,2,3,4,5,6]    $ scope.filterIds =功能（IDS）{
            复位功能（项目）{
                VAR过滤器= $ scope.filter;                     返回filter.indexOf（item.id）== -1！;
            }
     }    $ scope.loadNewFilter =功能（）{
        $ scope.filter = [1,5];
        $ $范围适用于（）。
    }}）;
 

FIDDLE LINK 的

的这是另外一个FIDDLE菱格纹这也是的

The following AngularJS application is working with ng-repeat and an applied filter. A certain applied filter leaves no values left. How can I display a notification?

js fiddle

HTML

<div >
<div data-ng-controller="myCtrl">


    <ul >
        <li data-ng-repeat="item in values | filter:filterIds()"> 
            <code>#{{item.id}}</code> Item
        </li>
    </ul>

    <p ng-show="!values.length">no vals with this filter</p>
    <button ng-click="loadNewFilter()"> filter now</button>
</div>


</div>

AngularJS

var app = angular.module('m', []);

app.controller('myCtrl', function ($scope) {
$scope.values = [{
    id: 1
}, ....
}];

$scope.filter = [1,2,3,4,5,6];

$scope.filterIds = function (ids) {
        return function (item) {
            var filter = $scope.filter;

                 return filter.indexOf(item.id) !== -1;         
        }
 }

$scope.loadNewFilter = function (){
    $scope.filter = [-1];
    $scope.$apply();
}

});

解决方案

I think that this is what you want:

<div >
    <div data-ng-controller="myCtrl">


        <ul >
            <li data-ng-repeat="item in testValue=(values | filter:filterIds())"> 
                <code>#{{item.id}}</code> Item
            </li>
        </ul>

        <p ng-show="!testValue.length">no vals with this filter</p>
        <button ng-click="loadNewFilter()"> filter now</button>
    </div>

After filtering values, the results are stored in testValue. So whenever you change the filter, 'testValue' also changes.

var app = angular.module('m', []);

app.controller('myCtrl', function ($scope) {
    $scope.values = [{
        id: 1
    }, {
        id: 2
    }, {
        id: 3
    }, {
        id: 4
    }, {
        id: 5
    }, {
        id: 6
    }];

    $scope.filter = [1,2,3,4,5,6];

    $scope.filterIds = function (ids) {
            return function (item) {
                var filter = $scope.filter;

                     return filter.indexOf(item.id) !== -1;         
            }
     }

    $scope.loadNewFilter = function (){
        $scope.filter = [1,5];
        $scope.$apply();
    }



});

FIDDLE LINK

This is Another one FIDDLE LINK check this also

这篇关于角JS - 显示消息如果异常重复是空的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！