How I can create a separate scope of data and their applied filter? angularjs

Question

I’m practicing AngularJS and I’m trying to do a reusable component, Until this step, I created it with the directive method, and my doubt is:

How I can separate the data set to json call to the server? ($http.get)

How I can filter the current control with the input text?

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>

score 1 · Accepted Answer · edited May 23 '17 at 12:24

To get users from an API just create a service that returns your data.

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

Inject this service inside the directive.

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

Save the results in a variable inside the link function.

link: function (scope)

To filter the list you can use a filter like in the posts below

Filter ng-repeat based on search input

ng-repeat :filter by single field

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

Or simply display the li element if the name contains the string that you write in the input (see snippet below)

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>

How I can create a separate scope of data and their applied filter? angularjs

1 Answers1