Angular js Two way data binding

Question

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.

What should user get in the filtered arrray when user select any value from the dropdown? Should it be the object of selected value? — Niral Munjariya
– Niral Munjariya, Commented May 8, 2015 at 7:47
Like if user selects Object2 , then he wil get this array : '{ name: "Object2", shape: "square", color: "orange" }' — Hardik Munjaal
– Hardik Munjaal, Commented May 8, 2015 at 7:53
No pankaj, No special requirement here for ui-select, i was just checking the use of ui-select. — Hardik Munjaal
– Hardik Munjaal, Commented May 8, 2015 at 7:54
@HardikMunjaal what do you mean by filter array..here is plunkr with dropdown which is selecting value plnkr.co/edit/J5kUB3EnonCnuodRpyBx?p=preview — Pankaj Parkar
– Pankaj Parkar, Commented May 8, 2015 at 9:32

Pankaj Parkar · Accepted Answer · 2015-05-08 11:33:44Z

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

Working Plunkr

edited May 8, 2015 at 11:33

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 Over a year ago

Bro, I want the same result but in different way. i want to use these filters in javascript not in view

Hardik Munjaal Over a year ago

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. :(

Collectives™ on Stack Overflow

Angular js Two way data binding

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related