0

Im trying to create an app that will build the table columns and rows dynamically im stuck when I try to filter. It seems like the ng-model im trying to set is not getting set.

fiddle: http://jsfiddle.net/v6ruo7mj/49/

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]);
}]);
<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>

2 Answers 2

2

Looks like you're missing

$scope.search = {};

Try this: jsFiddle

Full code:

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>
Sign up to request clarification or add additional context in comments.

Comments

0

Dynamic search Demo Angularjs using to dynamic filter logic

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.