Question

我的代码就像这样

    <body ng-app="myApp" ng-controller="MainCtrl">
    <div>Name only
        <br />
        <table id="searchObjResults">
            <tr>
                <th>Search</th>
                <th>Name</th>
                <th>Phone</th>
            </tr>
            <tr ng-repeat="friendObj in friends  | filter:search:strict  | limitTo:1">
                <td>
                    <input ng-model="search.name" />
                </td>
                <td>{{friendObj.name}}</td>
                <td>{{friendObj.phone}}</td>
            </tr>
        </table>
    </div>
    <div></div>
</body>


    angular.module('myApp', []).controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {
    $scope.friends = [{
        name: 'John',
        phone: '555-1276'
    }, {
        name: 'Mary',
        phone: '800-BIG-MARY'
    }, {
        name: 'Mike',
        phone: '555-4321'
    }, {
        name: 'Adam',
        phone: '555-5678'
    }, {
        name: 'Julie',
        phone: '555-8765'
    }, {
        name: 'Juliette',
        phone: '555-5678'
    }];

}]);

当我运行它时，它不起作用，我知道我可以改变搜索文本框的位置并使其工作。但由于种种原因，我无法在我的项目中做到这一点。有没有其他方法可以达到我的目的？

http://jsfiddle.net/v2xqmkwx/8/

Answer 1

这是我将如何做到的：

    <table id="searchObjResults">
        <tr>
            <th>Search</th>
            <th>Name</th>
            <th>Phone</th>
        </tr>
        <tr>
            <td>
                <input ng-model="search.name" ng-change="findFriend(search)"/>
            </td>
            <td>{{ firstFriendFound.name }}</td>
            <td>{{ firstFriendFound.phone }}</td>
        </tr>
    </table>

在控制器中：

angular.module('myApp', []).controller('MainCtrl', ['$http', '$filter', '$scope', function ($http, $filter, $scope) {

    $scope.findFriend = function(search) {
        var filtered = $filter('filter')($scope.friends, search);
        $scope.firstFriendFound = filtered.length > 0 ? filtered[0] : null;
    };

Answer 2

编辑：误解了这个问题

您可以通过使用ng-repeat-start和ng-repeat-end在同一行中重复两个td元素来实际执行此操作。

这是JSFiddle（http://jsfiddle.net/lookman/rkwoj70k/2/）

<body ng-app="myApp" ng-controller="MainCtrl">
<div>Search by all

    <br />
    <table id="searchObjResults">
        <tr>
             <th>Search</th>
            <th>Name</th>
            <th>Phone</th>

        </tr>
        <tr >
            <td><input ng-model="searchText" /></td>
            <td ng-repeat-start="friendObj in friends  | filter:searchText  | limitTo:1">{{friendObj.name}}</td>

               <td ng-repeat-end="friendObj in friends  | filter:searchText  | limitTo:1">{{friendObj.phone}}</td>

        </tr>


    </table>
</div>
<div>

</div>

angular.module('myApp', []).controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {
$scope.friends = [{
    name: 'John',
    phone: '555-1276'
}, {
    name: 'Mary',
    phone: '800-BIG-MARY'
}, {
    name: 'Mike',
    phone: '555-4321'
}, {
    name: 'Adam',
    phone: '555-5678'
}, {
    name: 'Julie',
    phone: '555-8765'
}, {
    name: 'Juliette',
    phone: '555-5678'
}];


$scope.submitForm = function (theData) {
    console.log('FriendObj:' + theData);
};

}]);

对angularJS进行过滤失败

2 个答案: