[英]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. 所以我对angular还是很陌生,但是对于我的项目,我同时使用了angular和jQuery。
I am currently making an ajax api call that loops through all responses and appends an <li>
to populate a <ul>
. 我目前正在进行一个ajax api调用,该调用循环所有响应并附加一个
<li>
来填充<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. 这样就产生了一个列表,现在我想使用angular和输入字段过滤该列表。
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
? 那么,如何使用输入字段
client-input
过滤.my-ul
的<li>
呢?
Any help would be appreciated. 任何帮助,将不胜感激。
Basically, you can convert your code from jQuery to Angular. 基本上,您可以将代码从jQuery转换为Angular。 What you have to is just fetch the HTTP request using
$http.get()
in Angular. 您所需要的只是使用Angular中的
$http.get()
获取HTTP请求。
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. 另外,您应该遵循tdragon对于HTML的回答,但是您需要为其添加过滤器。
<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 . 我绝对会建议您通过官方教程PhoneCat学习Angular 1。 It explains how to fetch a GET request and display in the list with search ability.
它说明了如何获取GET请求并在具有搜索功能的列表中显示。
$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. $http.get()
是在Angular中进行$ ajax调用的一种方法,成功从url 127.0.0.1/example/api/example
检索数据后,将其分配给$scope.clients
,您可以访问该clients
前端变量。
First of all - you are not supposed to put div
element as a ul
immediate child. 首先-您不应该将
div
元素作为ul
直接子对象。
Second of all - playing jQuery and Angular together is not a good idea. 第二-一起使用jQuery和Angular不是一个好主意。 If you are using Angular, you should use jQuery in directives only.
如果使用的是Angular,则应仅在指令中使用jQuery。
In your situation, your HTML should look like this: 在您的情况下,您的HTML应该如下所示:
<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 eg $http
services, instead of jQuery AJAX. 您应该使用
$http
服务而不是jQuery AJAX在控制器中检索items
。 The filtering you can do in ng-repeat
directive. 您可以在
ng-repeat
指令中进行过滤。 You can check the AngularJS home page - there is a sample very similar to your needs. 您可以查看AngularJS主页-有一个与您的需求非常相似的示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.