CODEWITHSUNDEEP
javascriptangularjs
Hardik Munjaal
Hardik Munjaal

Reputation: 93

Angular js Two way data binding

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.

Upvotes: 0

Views: 116

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136124

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

Working Plunkr

Upvotes: 1

Related Questions