CODEWITHSUNDEEP
javascriptjqueryangularjs
Katie
Katie

Reputation: 751

Angular filter ul based on jQuery appended li

So I'm quite new to angular but for my project I'm using both angular and jQuery.

I am currently making an ajax api call that loops through all responses and appends an <li> to populate a <ul>.

My code: 

$.ajax({
url: 'http://127.0.0.1/example/api/example',
type: 'GET',
dataType: 'json',
})
.done(function(data) {
   console.log("success");
   $.each(data.response, function(k, v) {
   $('.my-ul').append('<li>'+data.response[k].name+'</li>')
   });
})

So this produces a list, and now I would like to filter that list using angular and an input field.

I currently have an input field: 

    <ul class=".my-ul">
       <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label id="client-label">Client</label>
            <input id="client-input" ng-model="client-list">
          </md-input-container>
      </div>
    </ul>

Angular: 

angular
.module('MyApp',['ngMaterial', 'ngMessages', 'ngRoute'])
.controller('AppCtrl', function($scope) {

});

So how can I filter the <li> that is within .my-ul using the input field client-input?

Any help would be appreciated.

Upvotes: 0

Views: 54

Answers (2)

Shaohao
Shaohao

Reputation: 3511

Basically, you can convert your code from jQuery to Angular. What you have to is just fetch the HTTP request using $http.get() in Angular.

angular
.module('MyApp',['ngMaterial', 'ngMessages', 'ngRoute'])
.controller('AppCtrl', function($scope, $http) {
    $http.get('127.0.0.1/example/api/example').success(function(data){
      $scope.clients = data;
    });
});

Also you should follow tdragon's answer for the HTML but you need to add the filter to it.

<div layout-gt-sm="row">
  <md-input-container class="md-block" flex-gt-sm>
    <label id="client-label">Client</label>
    <input id="client-input" ng-model="searchclient">
  </md-input-container>
</div>
<ul class=".my-ul">
  <li ng-repeat="client in clients | filter: searchclient">{{client.name}}</li>
</ul>

I will definitely recommend you to learn Angular 1 with the official tutorial PhoneCat. It explains how to fetch a GET request and display in the list with search ability.

$http.get() is one way that make an $ajax call in Angular, after successfully retrieve the data from url 127.0.0.1/example/api/example, you assign it to $scope.clients, which you can access this clients variable in the front-end.

Upvotes: 1

tdragon
tdragon

Reputation: 3329

First of all - you are not supposed to put div element as a ul immediate child.

Second of all - playing jQuery and Angular together is not a good idea. If you are using Angular, you should use jQuery in directives only.

In your situation, your HTML should look like this:

<div layout-gt-sm="row">
    <md-input-container class="md-block" flex-gt-sm>
        <label id="client-label">Client</label>
        <input id="client-input" ng-model="client-list">
    </md-input-container>
</div>
<ul class=".my-ul">
    <li ng-repeat="item in items">{{item.name}}</li>
</ul>

You should retrieve items in your controller using e.g. $http services, instead of jQuery AJAX. The filtering you can do in ng-repeat directive. You can check the AngularJS home page - there is a sample very similar to your needs.

Upvotes: 0

Related Questions