javascript - 我如何创建单独的数据范围及其应用的过滤器？ Angular

Question

我正在练习 AngularJS，我正在尝试做一个可重用的组件，到这一步，我是用directive方法创建的，我的疑惑是:

如何将数据集分离为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;
    });
  }
});

在指令中注入(inject)此服务。

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>