如何創建單獨的數據範圍及其應用的過濾器？ 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>