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>

Community · Accepted Answer · 2017-05-23 12:24:29Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related