Question

我的代码就像这样

<body ng-app="myApp" ng-controller="MainCtrl">
<div>Name only
    <input ng-model="search.name" />
    <br />
    <table id="searchObjResults">
        <tr>
            <th>Name</th>
            <th>Phone</th>
        </tr>
        <tr ng-repeat="friendObj in friends  | filter:search:strict  | limitTo:1">
            <td>{{friendObj.name}}</td>
            <td>{{friendObj.phone}}</td>
        </tr>
    </table>
</div>
<div>
    <button type="button" id="btn_submit" ng-click="submitForm()">Get rates</button>
</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 () {
        // i want to get the data here
    };

}]);

正如您所看到的那样，我的屏幕上只有一个friend处于活动状态。当我按下提交按钮时，我希望该数据（已过滤的单行）成为当前$scope.friends上的唯一值，以便我可以将其作为所选数据发送到外部服务。任何人都可以指出我在这里需要做什么的 Fiddle

注意：我无法更改此按钮的位置。

Answer 1

为什么不让你的按钮成为表格行的一部分，因为只有一个？ Here is a JSFiddle showing it working in that fashion

按钮的ng-click函数处理程序可以简单地获取您感兴趣的实际friendObj参数：

 <button type="button" ng-click="submitForm( friendObj )">Get rates</button>

编辑：如果你不能移动按钮，实际上有办法做到这一点;使ng-repeat对新数组进行操作，该数组可在ng-repeat之外访问。所以你的ng-repeat语句变为：

<tr ng-repeat="friendObj in newArray = (friends  | filter:search:strict  | limitTo:1)">

然后你的按钮可以简单地引用单元素数组：

<button type="button" ng-click="submitForm( newArray )">Get rates</button>

Updated Fiddle here： - ）

Answer 2

如果您将过滤器放在控制器而不是视图中，则可以设置$scope.result函数可以使用的submitForm之类的变量。例如，在HTML中，您可以向搜索字段添加ng-change指令，如下所示：

<input ng-model="search.name" ng-change="updateResult()" />

然后，您不是使用ng-repeat，而是使用ng-show来显示一个结果，或者如果没有结果则隐藏该行：

<tr ng-show="result">
    <td>{{result.name}}</td>
    <td>{{result.phone}}</td>
</tr>

然后在你的控制器中：

$scope.search = {name: ''};
$scope.updateResult = function() {
    $scope.result = $filter('filter')($scope.friends, $scope.search.name)[0];
}
$scope.updateResult();

// ...

$scope.submitForm = function() {
    // $scope.result can be used here
}

编辑：这种方法的优势在于它有点DRYer，因为您不会在submitForm内重新过滤。 MarcoS的方法具有缩短的优势！

Answer 3

试试这个：

$scope.submitForm = function () {
  var data = $filter('filter')($scope.friends, $scope.search.name);
};

小提琴here。

仅在模型对象上获取过滤数据作为结果，angularjs

3 个答案: