Question

我是AngularJs的新手，不知怎的，我现在能够创建一个指令，可用于将数据从控制器绑定到html。现在我想创建一个类似于在AngularJs上显示的列表搜索的功能。此列表包含不同的对象。我在这里创建了Plunker

HTML

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="movieDesc">
    <diuv>
      <input type="text" placeholder="search"/>
      <input type="button" value="Search" />
    </div>
    <div ng-repeat="m in movies" movies="m" save="saveData(movie)"></div>
  </body>

</html>

控制器

   angular.module('app', []);

    angular.module('app').controller('movieDesc', function($scope) {

      $scope.movies = [{
        name: 'abc',
        desc: 'this is desc text for the movie',
        pic: 'http://png.clipart.me/graphics/thumbs/134/abstract-geometric-background-triangle-and-square-black_134053397.jpg'
      }, {
        name: 'def',
        desc: 'this is desc text for the movie def',
        pic: 'http://png.clipart.me/graphics/thumbs/201/abstract-modern-banner-background-of-geometric-shapes-abstract-geometric-form_201768245.jpg'
      }, {
        name: 'ghi',
        desc: 'this is desc text for the movie ghi',
        pic: 'http://www.cianellistudios.com/images/abstract-art/abstract-art-infinite-150.jpg'
      }]

      $scope.saveData = function(data) {
        console.log(data);
      }

    });

我的指示

angular.module('app').directive('movies', function() {
  return {
    templateUrl: "movieCard.html",
    restrict: "EA",
    scope: {
      movies: '=',
      save: '&'
    },
    link: function(scope, element, attrs) {
       console.log("link function called");
      element.addClass('moviesBox');
      var clickedFn = function() {
        alert("clicked");
      };
      console.log("console", element[0].querySelector('.btnSelect'));
      var $this = element[0].querySelector('.btnSelect');
      $($this).click(function() {
        alert(scope.movies.desc)
      })
    }
  }
})

movieCard.html

<div>
  <div>
    <b>Name:</b> {{movies.name}}
  </div>
  <div>
    <b>Description:</b> {{movies.desc}}
  </div>
  <div>
    <img ng-src="{{movies.pic}}" />
  </div>
  <div>
    <input type="text" ng-model="movies.someText">
  </div>
  <div>
    <input class="btnSelect" type="button" value="Desc" ng-click="clickedFn()">
  </div>
  <div>
    <input class="btnSelect" type="button" value="Save Data" ng-click="save({movie: movies})">
  </div>
</div>

HTML中有一个搜索按钮，所以我想执行该搜索选项，我可以在其中键入并获取我搜索的列表

Answer 1

您可以使用2个选项来实现此目的。 1.像这样使用smth。

<input type="button" value="Search" data-ng-click=filter(key) data-ng-model="key" />

$scope.filter = function(key){
$scope.filteredMovies = $scope.movies.filter(function filterByName(movie){
   return movie.name.indexOf(key) !==-1;
 });
};

当您点击时，此代码将过滤您的列表，只有过滤后的主题会在过滤的电子邮件上显示。

您可以使用角度滤镜从那里获得相同的行为： https://docs.angularjs.org/api/ng/filter/filter

用法在HTML模板绑定中 {{filter_expression | filter：表达式：比较器}} 在JavaScript中 $ filter（'filter'）（数组，表达式，比较器）

angular.module('app').filter('superFilter', function(){ 
return function(list, key){ 
if (!key) { 
return list; 

} 
return list.filter(function filterByName(movie) { 
return movie.name.indexOf(key) !== -1; 
}); 
} 

});

但要注意过滤器：）

在指令创建的列表上执行搜索

1 个答案: