Angular.js Search查询搜索表单是否不在当前文件中

Angular.js Search Query if search form is out of current file

本文关键字：文件 是否 表单 Search js 查询 搜索 搜索表 Angular      更新时间：2023-09-26

我在index.html上有这样的代码:

<div class="container-fluid people-container">
    <div class="search">
        <!--Sidebar content-->
        <span class="search-text">Search:</span>
        <input ng-model="query" class="search-input">
        <span class="sort-text">Sort:</span>
        <select ng-model="orderProp" class="sort-select">
            <option value="name">Alphabetical</option>
            <option value="age">Date</option>
        </select>
    </div>
    <div class="people-listing">
        <!--Body content-->
        <ul class="people">
            <li ng-repeat="person in people | filter:query | orderBy:orderProp" class="thumbnail person-listing clearfix">
                <a class="clearfix" href="#/people/{{person.id}}">
                    <img class="thumb" ng-src="{{person.imageUrl}}">
                    <div class="person-info">
                        <h1 class="title">{{person.name}}</h1>
                        <span class="year">{{person.born}} - {{person.died}}</span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>

我决定将UI分成几个部分，并将搜索部分移动到search.html:

<div class="search">
    <!--Sidebar content-->
    <span class="search-text">Kërko:</span>
    <input ng-model="query" class="search-input">
    <span class="sort-text">Radhit sipas:</span>
    <select ng-model="orderProp" class="sort-select">
        <option value="name">Alfabetit</option>
        <option value="age">Vitit</option>
    </select>
</div>

在此之前，搜索表单工作得很好。在我把它移到另一个模板后，它不起作用。我不知道，因为这是我第一天使用Angular.js，我需要一些帮助。另外，这里是我的controllers.js:

var deshmoretControllers = angular.module('deshmoretControllers', []);
deshmoretControllers.controller('PeopleListCtrl', ['$scope', 'Person',
  function($scope, Person) {
    $scope.people = Person.query();
    $scope.orderProp = 'age';
  }]);
...

砰砰作响:

http://plnkr.co/edit/J98O34dBFaUchhKdT6ck

我修复了代码。里面有很多问题……工作柱塞LINK

1. you need ng-controller which covers both search & results, you kept the controller on just each box & not on list
2. make sure that you ng-model never uses value without dot, rather than query - use variable as search.query
2b. make sure to initialize the search object in controller $scope.mysearch = {};

我做了下面的修改

  1. 将控制器移动到list.html而不是search.html
  2. init美元范围。mysearch = {} in controller

这是一个原型继承问题。假设您正在移动模板并使用ng-include引用它。ng-include创建一个新的作用域。您将query设置在新作用域中，而不是在作为PeopleListCtrl的一部分的父作用域中

要修复它，将查询定义为父范围

上的object

$scope.query={term:''}

然后在partial search.html

中将其作为查询引用

<input ng-model="query.term" class="search-input">

通过这种方式，子作用域可以操作父作用域上定义的对象属性。

只要父子关系存在，你现在就可以访问父作用域中的更新查询数据。

如果使用的话，ng-controller= PeopleListCtrl的声明应该在插入search.html的父元素上。如果控制器是用$route definition注入的，那么就不需要做任何改变了。

由于query已更改为对象，因此所有引用都应该是现在的query.term，如

ng-repeat="person in people | filter:query.term | orderBy:orderProp"

要了解更多关于原型继承和作用域的知识，请参阅这个wiki https://github.com/angular/angular.js/wiki/Understanding-Scopes

相关文章：