In my angular application, there is a dropdown with various values. When a user selects a specific value from the dropdown, I want to display 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>
Code available on Plunker
I aim for user selection in dropdown to trigger display of filtered array.