Question

现在尝试使用角度创建概念验证。我有这个working plunker，如果我从下拉列表中选择一个选项，它将显示$http.get( )中的项目列表。我也有一个搜索输入，当我输入文本时，我希望能够进行自己的$http.get( )调用，并在与上面列表相同的列表中显示数据。我只是无法让所有人一起工作。我希望用户能够从下拉列表或搜索中进行选择，但不能同时选择两者。

这是html：

<html>
<head>
  <script data-require="angular.js@1.4.0-rc.0" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
<body ng-app="myapp" ng-controller="MainCtrl">
  <h1>Hello Plunker!</h1>
  <div>
    <select ng-options="post as post.id for post in allPosts" ng-model="selectPost" ng-change="select()">
      <option value="">--select--</option>
    </select>
    <input type="text" ng-model="searchText" ng-change="search()" />
    <ul>
      <li data-ng-repeat="item in records | orderBy:'Name':reverse">
        {{item.email}}
      </li>
    </ul>
  </div>
</body>
</html>

和Javascript：

angular.module('myapp', [])
  .controller('MainCtrl', function($scope, $http) {
    var records;
    $scope.selectPost = '';
    $scope.searchText = '';
    $http.get('http://jsonplaceholder.typicode.com/posts').success(function(data1) {

      $scope.allPosts = data1;
      $scope.total = $scope.allPosts.length;
    });

    $scope.select = function() {
      $scope.searchText = '';
      $scope.search = $scope.selectPost;
      // really, the URL should tell it which posts to get
      // but because this is not a real server, we filter here
      $http.get('http://jsonplaceholder.typicode.com/comments').success(function(data2) {
        $scope.records = [];
        data2.forEach(function(r) {
          if (r && r.postId && r.postId === $scope.selectPost.id) {
            $scope.records.push(r);
          }
        });
      });
    };

    $scope.search = function() {
      //clear the select, go here http://jsonplaceholder.typicode.com/comments
      //and display/filter emails based on the search input
    };



  });

正如您在输入搜索输入时所看到的那样，我想调用search( )函数并清除选择输入并进行另一个ajax调用，并将<li>填入与之匹配的电子邮件搜索。

Answer 1

您要宣布$ scope.search两次

将功能名称185532,5更改为其他类似名称：

HTML：

$scope.search

角：

<input type="text" ng-model="searchText" ng-change="tsearch()" />

Answer 2

首先，行

$scope.search = $scope.selectPost;

会覆盖搜索功能，因此请删除该行。

然后，在搜索功能中，您可以轻松重置选择元素，并通过电子邮件而不是ID过滤结果。

http://plnkr.co/edit/BU3s1aNS8b0ChT29D2J5?p=preview

输入搜索输入时清除下拉选择

2 个答案: