If I have an array of objects, and I want to bind the Angular model to a property of one of the elements based on a filter, how do I do that? I can explain better with a concrete example:
HTML:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="MyCtrl">
<input ng-model="results.year">
<input ng-model="results.subjects.title | filter:{grade:'C'}">
</body>
</html>
Controller:
function MyCtrl($scope) {
$scope.results = {
year:2013,
subjects:[
{title:'English',grade:'A'},
{title:'Maths',grade:'A'},
{title:'Science',grade:'B'},
{title:'Geography',grade:'C'}
]
};
}
JSBin: http://jsbin.com/adisax/1/edit
I want to filter the second input to the subject with a grade ‘C’, but I don’t want to bind the model to the grade; I want to bind it to the title of the subject that has grade ‘C’.
Is this possible, and if so, how is it done?
Answer
<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
<input ng-model="subject.title" />
</div>