Question

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

我决定将用户界面划分为部分，并将搜索部分移至 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';
  }]);

...

Plunker：

http://plnkr.co/edit/J98O34dBFaUchhKdT6ck

Answer 1

我修复了代码..其中有很多问题.. WORKING PLUNKER 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 = {};

我做了以下修改

将控制器移至list.html而非search.html
  控制器中的
init $ scope.mysearch = {}

Answer 2

我们这是一个原型继承问题。假设您正在移动模板并使用ng-include引用它。 ng-include创建了一个新范围。您在新范围中设置了query，而不是PeopleListCtrl

中的父范围

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

上的对象

$scope.query={term:''}

然后在部分search.html中将其引用为查询

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

通过这种方式，子范围可以操纵在父级上定义的对象属性。

只要父子关系存在，您现在可以访问父范围中的更新查询数据。

ng-controller = PeopleListCtrl的声明也应该在search.html插入的父元素上（如果使用的话）。如果使用$ route定义注入控制器，则无需更改任何内容。

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

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

要了解有关原型继承和范围的更多信息，请参阅此wiki https://github.com/angular/angular.js/wiki/Understanding-Scopes

Angular.js搜索查询，如果搜索表单不在当前文件中

2 个答案: