Question

简而言之，我试图在一个视图中的一个控制器的搜索字段中输入文本，以在与不同控制器关联的完全不同的视图中显示搜索结果。

您在“第一视图”的输入字段中输入的任何名称的结果都需要显示在“第二视图”（在它的输入字段下方），就像在同一名称中输入的那样。 “SECOND VIEW”的输入字段（这是主要目标）。

请注意，两个输入字段之间的共享双向数据绑定不是必需的。我只是用它作为实验/黑客/肮脏的方式试图达到我想要的，因为我不知道任何其他更好的方法！如果你们中的任何一个人能够实现主要目标，那么两个输入字段之间的双向数据绑定将是最优选的，我将非常感激！提前谢谢！

HTML / VIEW

<div ng-app="app">

    <div ng-controller="first">
        <h3>FIRST</h3> begin typing here: Tom, Dick, or Harry
        </br>
       <br/><input type="text" ng-model="data1.text" />
    </div>

    <div ng-controller="second">
    <h3>SECOND</h3> The results of what ever name you enter in the input field in "FIRST VIEW" needs to be displayed below the same way it would display if you entered in that same name in the input field in "SECOND VIEW" (this is the primary goal).

        </br></br>
        <input type="search" id="search" class="form-control"  ng-model="data2.text" ng-change="searchText = data2.text">

    <ul>
        <li ng-repeat='person in people | filter:searchText'> {{person.name}} </li>
    </ul>


    </div>

</div>

JS

var app = angular.module("app", []);

app.factory("sharedScope", function($rootScope) {
    var scope = $rootScope.$new(true);
    scope.data = {};
    return scope;
});

app.controller("first", function($scope, sharedScope) {
    $scope.data1 = sharedScope.data;
});

app.controller("second", function($scope, sharedScope) {
    $scope.data2 = sharedScope.data;

    $scope.people = [
        {
            name:'Tom'
        },
        {
            name:'Dick'
        },
        {
            name:'Harry'
        }

    ]
});

Answer 1

只需将过滤器设置为ng-repeat，以匹配与输入中使用的ng-model相同的模型对象

更改

<li ng-repeat='person in people | filter:searchText'> {{person.name}} </li>

要

<li ng-repeat='person in people | filter:data2.text'> {{person.name}} </li>

通过控制器之间的共享范围实现搜索过滤结果的问

1 个答案: