Question

所以我对角度很新，但对于我的项目，我正在使用angular和jQuery。

我目前正在进行ajax api调用，遍历所有回复并添加<li>来填充<ul>。

我的代码：

$.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>')
   });
})

所以这会生成一个列表，现在我想使用angular和input字段过滤该列表。

我目前有一个输入字段：

    <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) {

});

那么如何使用输入字段<li>过滤.my-ul内的client-input？

任何帮助都将不胜感激。

Answer 1

基本上，您可以将代码从jQuery转换为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;
    });
});

此外，您应该关注HTML的 tdragon 的答案，但您需要为其添加过滤器。

<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>

我一定会建议您使用官方教程PhoneCat学习Angular 1。它解释了如何获取GET请求并在具有搜索能力的列表中显示。

$http.get()是在Angular中进行$ ajax调用的一种方法，在成功从网址127.0.0.1/example/api/example检索数据后，您将其分配给$scope.clients，您可以访问此clients C:/Program Files (x86)/ApplicationName/application.exe 1}}前端的变量。

Answer 2

首先 - 你不应该将div元素作为ul直接孩子。

其次 - 一起玩jQuery和Angular并不是一个好主意。如果您使用的是Angular，则只应在指令中使用jQuery。

在您的情况下，您的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>

您应该使用以下方法检索控制器中的items。 $http服务，而不是jQuery AJAX。您可以在ng-repeat指令中进行过滤。您可以查看AngularJS主页 - 有一个非常类似于您需求的示例。

基于jQuery附加li的角度过滤器ul

2 个答案: