如何创建单独的数据范围及其应用的过滤器？ angularjs

Question

我练AngularJS，我试图做一个可重用的组件， 直到这一步，我用指令方法创建它，我的疑问是：

我如何区分数据设置为JSON打电话给服务器？ （$ http.get）

如何使用输入文本过滤当前控件？

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

 
app.directive('list', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     list: '=set' 
 
    }, 
 
    replace: true, 
 
    controller: function() {}, 
 
    controllerAs: 'ctrl', 
 
    bindToController: true, 
 
    template: layout 
 
    } 
 
}); 
 

 
// template (html) 
 
var layout = '<div>'+ 
 
'<input type="text" placeholder="filter" />'+ 
 
'<ul>'+ 
 
    '<li ng-repeat="item in ctrl.list">' + 
 
    '<input type="checkbox" /><label>{{item.name}}</label>'+ 
 
    '</li>'+ 
 
'</ul></div>';

ul { 
 
    list-style-type:none; 
 
    maring:0px; 
 
    padding:0px; 
 
} 
 

 
ul > li { 
 
    background-color:SkyBlue; 
 
    width:200px; 
 
    padding:5px 10px; 
 
    margin-bottom:5px; 
 
} 
 

 
input[type="text"] { 
 
    width:220px; 
 
    height: 20px 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <h2>List 1</h2> 
 
    <list data-set="[{name:'Sergio'},{name:'Maria'}]"></list> 
 
    <h2>List 2</h2> 
 
    <list data-set="[{name:'Agustin'},{name:'Ana'}]"></list> 
 
</div>

Answer 1

要获得从API用户只需创建一个service返回数据。

app.service('userService', function($http) { 
    this.getUser = function() { 
    return $http.get('https://randomuser.me/api/').then(function(list) { 
     return list.data.results; 
    }); 
    } 
}); 

在指令中注入此服务。

app.directive('list', function(userService) 

将结果保存在链接函数内的变量中。

link: function (scope) 

要过滤列表，你可以在帖子使用过滤器，像下面

Filter ng-repeat based on search input

ng-repeat :filter by single field

Filtering by Multiple Specific Model Properties in AngularJS (in OR relationship)

或者，如果名称中包含只是显示li元素您在输入中写入的字符串（请参阅下面的代码段）

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

 
app.directive('list', function(userService) { 
 
    return { 
 
    restrict: 'E', 
 
    scope: {}, 
 
    replace: true, 
 
    template: layout, 
 
    link: function (scope) { 
 
     scope.users = []; 
 
     userService.getUser().then(function(users) { 
 
     scope.users.push({name: users[0].name.first}); 
 
     }); 
 
    } 
 
    } 
 
}); 
 

 
var layout = '<div>'+ 
 
'<input type="text" placeholder="filter" ng-model="userSearch">'+ 
 
'<ul>'+ 
 
    '<li ng-repeat="item in users" ng-if="item.name.indexOf(userSearch)>-1 || userSearch.length==0 || userSearch==undefined">' + 
 
    '<input type="checkbox"><label>{{item.name}}</label>'+ 
 
    '</li>'+ 
 
'</ul></div>'; 
 

 
app.service('userService', function($http) { 
 
    this.getUser = function() { 
 
    return $http.get('https://randomuser.me/api/').then(function(list) { 
 
     return list.data.results; 
 
    }); 
 
    } 
 
});

ul { 
 
    list-style-type:none; 
 
    maring:0px; 
 
    padding:0px; 
 
} 
 

 
ul > li { 
 
    background-color:SkyBlue; 
 
    width:200px; 
 
    padding:5px 10px; 
 
    margin-bottom:5px; 
 
} 
 

 
input[type="text"] { 
 
    width:220px; 
 
    height: 20px 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <h2>List 1</h2> 
 
    <list></list> 
 
    <h2>List 2</h2> 
 
    <list></list> 
 
</div>