There are some values in the dropdown in my angular application. My requirement is, when user select any particular value from the dropdown, he'll get the complete array corresponding to that value.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-$filter-production</title>
<script src="//ajax.goo gleapis.com/ajax/libs/angularjs/1.4.0- rc.1/angular.min.js"></script>
<script>
(function (angular) {
'use strict';
angular.module('filterExample', [])
.controller('MainCtrl', function ($scope, $filter) {
$scope.originalText = [
{ name: "Object1", shape: "circle", color: "red" },
{ name: "Object2", shape: "square", color: "orange" },
{ name: "Object3", shape: "triangle", color: "yellow" },
{ name: "Object4", shape: "circle", color: "green" },
{ name: "Object5", shape: "sphere", color: "blue" },
{ name: "Object6", shape: "hexagon", color: "indigo" },
{ name: "Object7", shape: "square", color: "violet" },
{ name: "Object8", shape: "triangle", color: "red" }
]
//$scope.xxx = {d:'Object1'};
$scope.xxx = { d: null };
$scope.filteredText = $filter('filter')($scope.originalText, { name: $scope.xxx.d });
});
})(window.angular);
</script>
</head>
<body ng-app="filterExample">
<div ng-controller="MainCtrl">
<h3>{{ originalText }}</h3>
<h3>{{ filteredText }}</h3>
<select ng-model="xxx.d" ui-select2="">
<option ng-repeat="item in originalText" value="{{item.name}}">{{item.name}}</option>"
</select>
{{xxx.d}}
</div>
</body>
</html>
My Code in Plunker
Here I want that, when user selects any particular value in dropdown, then he should get the filtered array.
vidriduch
4,8738 gold badges45 silver badges66 bronze badges
asked May 8, 2015 at 7:32
Hardik Munjaal
931 silver badge13 bronze badges
1 Answer 1
You could use filter for achieving this thing
<div ng-controller="MainCtrl">
<h3>{{ originalText }}</h3>
<h3>{{ filteredText =(originalText| filter: {shape: xxx.shape}) }}</h3>
<select ng-model="xxx" ng-options="item as item.shape for item in originalText">
</select>
</div>
Update
You can do this filtering from controller by calling filtering method on change using ng-change directive
Markup
<select ng-model="xxx" ng-options="item as item.shape for item in originalText" ng-change="changeFunction()">
</select>
Code
$scope.changeFunction = function(){
$scope.filteredText = $filter('filter')($scope.originalText, { shape: $scope.xxx.shape}, true);
}
answered May 8, 2015 at 10:27
Pankaj Parkar
136k23 gold badges241 silver badges307 bronze badges
Sign up to request clarification or add additional context in comments.
2 Comments
Hardik Munjaal
Bro, I want the same result but in different way. i want to use these filters in javascript not in view
Hardik Munjaal
like i was using
$scope.filteredText = $filter('filter')($scope.originalText, { name: $scope.xxx.d}); But the problem here is that $scope.xxx.d is not dynamically changing value. :(lang-js
ui-select2there