动态列ng-model未设置的角度过滤表

Question

我试图创建一个应用程序，当我尝试过滤时，它会动态地构建表格列和行。似乎我试图设置的ng模型没有设置。

小提琴：http://jsfiddle.net/v6ruo7mj/49/

＆＃13;

＆＃13;

var myApp = angular.module('myApp',[]);
myApp.filter('test',function(){
	return function(input,other){
	console.log(other);
		console.log(input);
		return input;
	}
});
myApp.controller('MyCtrl', ['$scope', function($scope) {
    $scope.rows = [
    {
        "branch": "default", 
        "comment": "", 
        "name": "20141228.150706", 
        "score": "0.45000", 
        "time": "0.02"
    }, 
    {
        "branch": "default", 
        "comment": "", 
        "name": "20141226.022147", 
        "score": "0.56000", 
        "time": "6.00"
    }, 
    {
        "branch": "default", 
        "comment": "", 
        "name": "20141226.022112", 
        "score": "0.56000", 
        "time": "3.00"
    }, 
    {
        "branch": "default", 
        "comment": "", 
        "name": "20141226.021955", 
        "score": "0.55000", 
        "time": "3.00"
    }, 
    {
        "branch": "default", 
        "comment": "", 
        "name": "20141226.021920", 
        "score": "0.49000", 
        "time": "10.00"
    }];
    $scope.cols = Object.keys($scope.rows[0]);
}]);

＆＃13;

<div ng-app="myApp">
<div ng-controller="MyCtrl">
  <table border="1">
    <tr>
        <th ng-repeat="column in cols"><input ng-model="search[column]" placeholder="{{column}}" type="text"></th>
    </tr>
    <tr ng-repeat="row in rows |filter:search">
      <td ng-repeat="column in cols ">{{row[column]}}</td>
    </tr>
  </table>
  <pre>{{search | json}}</pre>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

看起来你错过了

$scope.search = {};

试试这个：jsFiddle

完整代码：

var myApp = angular.module('myApp',[]);

myApp.filter('test',function(){
    return function(input,other){
        console.log(other);
        console.log(input);
        return input;
    }
});
myApp.controller('MyCtrl', ['$scope', function($scope) {
    $scope.search = {};        
    $scope.rows = [{
        "branch": "default", 
        "comment": "", 
        "name": "20141228.150706", 
        "score": "0.45000", 
        "time": "0.02"
    }, 
    {
        "branch": "default", 
        "comment": "", 
        "name": "20141226.022147", 
        "score": "0.56000", 
        "time": "6.00"
    }, 
    {
        "branch": "default", 
        "comment": "", 
        "name": "20141226.022112", 
        "score": "0.56000", 
        "time": "3.00"
    }, 
    {
        "branch": "default", 
        "comment": "", 
        "name": "20141226.021955", 
        "score": "0.55000", 
        "time": "3.00"
    }, 
    {
        "branch": "default", 
        "comment": "", 
        "name": "20141226.021920", 
        "score": "0.49000", 
        "time": "10.00"
    }];
    $scope.cols = Object.keys($scope.rows[0]);
}]);

HTML：

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <table border="1">
            <tr>
                <th ng-repeat="column in cols"><input ng-model="search[column]" placeholder="{{column}}" type="text"></th>
            </tr>
            <tr ng-repeat="row in rows |filter:search">
                <td ng-repeat="column in cols ">{{row[column]}}</td>
            </tr>
        </table>
        <pre>{{search | json}}</pre>
    </div>
</div>

Answer 2

Dynamic search Demo Angularjs用于动态过滤逻辑