angularjs - how to filter a combo box that is created by a Ng-Repeat based on the same combo box in the previous row in Angular js? -
i have select element repeated ng-repeat directive when "addbutton" clicked . object fills select element has format :
{ id: 1, title: 'aaa', priority: 1 }, i want when user selects option combo box , clicks on "addbutton", in next row options have priority greater the previous selected item priority list , shown .
code : <!doctype html> <html ng-app="mainapplication"> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <script> var mainapplication = angular.module('mainapplication', []); mainapplication.controller('maincontroller', ['$scope', function ($scope) { $scope.addressprefix = [ { id: 1, title: 'aaa', priority: 1 }, { id: 1, title: 'bbb', priority: 2 }, { id: 1, title: 'ccc', priority: 3 }, { id: 1, title: 'ddd', priority: 4 }, { id: 1, title: 'eee', priority: 5 }, { id: 1, title: 'fff', priority: 6 }, { id: 1, title: 'ggg', priority: 7 }, { id: 1, title: 'hhh', priority: 8 }, { id: 1, title: 'iii', priority: 2 }, { id: 1, title: 'jjj', priority: 2 }, { id: 1, title: 'kkk', priority: 2 }, { id: 1, title: 'lll', priority: 10 }, { id: 1, title: 'mmm', priority: 9 }, { id: 1, title: 'ooo', priority: 7 }, { id: 1, title: 'ppp', priority: 12 }, { id: 1, title: 'qqq', priority: 3 }, { id: 1, title: 'rrr', priority: 13 }, { id: 1, title: 'zzz', priority: 14 }, ]; $scope.addresscontrols = [{ id: 1 }]; $scope.btnaddressadd_click = function () { var newitemno = $scope.addresscontrols.length + 1 $scope.addresscontrols.push({ 'id': newitemno }); }; $scope.btnaddressremove_click = function () { var lastitem = $scope.addresscontrols.length - 1 $scope.addresscontrols.splice(lastitem); }; }]); </script> </head> <body dir="rtl" ng-controller="maincontroller"> <div class="row" > <div class="col-sm-6"> <button type="button" id="btnaddressadd" class="btn btn-primary" ng-click="btnaddressadd_click()"> <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true" style="font-size:1.2em"></span> </button> <button type="button" id="btnaddressremove" class="btn btn-danger" ng-click="btnaddressremove_click()" ng-disabled="addresscontrols.length==1"> <span class="glyphicon glyphicon-minus" aria-hidden="true" style="font-size:1.2em"></span> </button> </div> </div> <hr /> <fieldset class="row " id="address" ng-repeat="item in addresscontrols" ng-disabled="$first"> <div class="col-sm-1" > <div class="form-group"> <label > prefix </label> </div> </div> <div class="col-sm-3" > <div class="form-group"> <span></span> <select class="form-control" ng-model="prefixselecteditem" ng-options="prefix.title prefix in addressprefix"> <option value="">--select option--</option> </select> </div> </div> <div class="col-sm-4"> <div class="form-group"> <div class="errorblock"> </div> <input class="form-control" type="text" value="" style="height:32px"> </div> </div> </fieldset> </body> </html> link of source code in codepen
edit
i have ideas how to when "addbutton" clicked wondering how possible achieve functionality when there active combo boxes , user selects or changes option of 1 of them.
there many approaches achieve this. here 2 of them:
method 1: using angular filter in html
var mainapplication = angular.module('mainapplication', []); mainapplication.controller('maincontroller', ['$scope', function($scope) { $scope.addressprefix = [{ id: 1, title: 'aaa', priority: 1 }, { id: 1, title: 'bbb', priority: 2 }, { id: 1, title: 'ccc', priority: 3 }, { id: 1, title: 'ddd', priority: 4 }, { id: 1, title: 'eee', priority: 5 }, { id: 1, title: 'fff', priority: 6 }, { id: 1, title: 'ggg', priority: 7 }, { id: 1, title: 'hhh', priority: 8 }, { id: 1, title: 'iii', priority: 2 }, { id: 1, title: 'jjj', priority: 2 }, { id: 1, title: 'kkk', priority: 2 }, { id: 1, title: 'lll', priority: 10 }, { id: 1, title: 'mmm', priority: 9 }, { id: 1, title: 'ooo', priority: 7 }, { id: 1, title: 'ppp', priority: 12 }, { id: 1, title: 'qqq', priority: 3 }, { id: 1, title: 'rrr', priority: 13 }, { id: 1, title: 'zzz', priority: 14 }, ]; $scope.addresscontrols = [{ id: 1 }]; $scope.btnaddressadd_click = function() { var newitemno = $scope.addresscontrols.length + 1 $scope.addresscontrols.push({ 'id': newitemno }); }; $scope.btnaddressremove_click = function() { $scope.addresscontrols.pop(); }; $scope.myfilter = function(index) { return function(option, optionindex, alloptions) { var lastselectedoption = (index > 0) && $scope.addresscontrols[index - 1] && $scope.addresscontrols[index - 1].prefixselecteditem; if (!lastselectedoption) return true; return option.priority > lastselectedoption.priority; } } }]);<html ng-app="mainapplication"> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> </head> <body dir="rtl" ng-controller="maincontroller"> <div class="row"> <div class="col-sm-6"> <button type="button" id="btnaddressadd" class="btn btn-primary" ng-click="btnaddressadd_click()"> <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true" style="font-size:1.2em"></span> </button> <button type="button" id="btnaddressremove" class="btn btn-danger" ng-click="btnaddressremove_click()" ng-disabled="addresscontrols.length==1"> <span class="glyphicon glyphicon-minus" aria-hidden="true" style="font-size:1.2em"></span> </button> </div> </div> <hr /> <fieldset class="row " id="address" ng-repeat="item in addresscontrols track $index" ng-disabled="$first"> <div class="col-sm-1"> <div class="form-group"> <label> prefix </label> </div> </div> <div class="col-sm-3"> <div class="form-group"> <span></span> <select class="form-control" ng-model="item.prefixselecteditem" ng-options="prefix.title prefix in addressprefix | filter: myfilter($index)"> <option value="">--select option--</option> </select> </div> </div> <div class="col-sm-4"> <div class="form-group"> <div class="errorblock"> </div> <input class="form-control" type="text" value="" style="height:32px"> </div> </div> </fieldset> </body> </html>method 2: using angular filter in controller
var mainapplication = angular.module('mainapplication', []); mainapplication.controller('maincontroller', ['$scope', function($scope) { $scope.addressprefix = [{ id: 1, title: 'aaa', priority: 1 }, { id: 1, title: 'bbb', priority: 2 }, { id: 1, title: 'ccc', priority: 3 }, { id: 1, title: 'ddd', priority: 4 }, { id: 1, title: 'eee', priority: 5 }, { id: 1, title: 'fff', priority: 6 }, { id: 1, title: 'ggg', priority: 7 }, { id: 1, title: 'hhh', priority: 8 }, { id: 1, title: 'iii', priority: 2 }, { id: 1, title: 'jjj', priority: 2 }, { id: 1, title: 'kkk', priority: 2 }, { id: 1, title: 'lll', priority: 10 }, { id: 1, title: 'mmm', priority: 9 }, { id: 1, title: 'ooo', priority: 7 }, { id: 1, title: 'ppp', priority: 12 }, { id: 1, title: 'qqq', priority: 3 }, { id: 1, title: 'rrr', priority: 13 }, { id: 1, title: 'zzz', priority: 14 }, ]; $scope.addresscontrols = [{ id: 1 }]; $scope.btnaddressadd_click = function() { var newitemno = $scope.addresscontrols.length + 1 $scope.addresscontrols.push({ 'id': newitemno }); }; $scope.btnaddressremove_click = function() { $scope.addresscontrols.pop(); }; $scope.myfilter = function(arr, index) { var lastselectedoption = (index > 0) && $scope.addresscontrols[index - 1] && $scope.addresscontrols[index - 1].prefixselecteditem; if (!lastselectedoption) return arr; return arr.filter(function (option) { return option.priority > lastselectedoption.priority; }); } }]);<html ng-app="mainapplication"> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> </head> <body dir="rtl" ng-controller="maincontroller"> <div class="row"> <div class="col-sm-6"> <button type="button" id="btnaddressadd" class="btn btn-primary" ng-click="btnaddressadd_click()"> <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true" style="font-size:1.2em"></span> </button> <button type="button" id="btnaddressremove" class="btn btn-danger" ng-click="btnaddressremove_click()" ng-disabled="addresscontrols.length==1"> <span class="glyphicon glyphicon-minus" aria-hidden="true" style="font-size:1.2em"></span> </button> </div> </div> <hr /> <fieldset class="row " id="address" ng-repeat="item in addresscontrols track $index" ng-disabled="$first"> <div class="col-sm-1"> <div class="form-group"> <label> prefix </label> </div> </div> <div class="col-sm-3"> <div class="form-group"> <span></span> <select class="form-control" ng-model="item.prefixselecteditem" ng-options="prefix.title prefix in myfilter(addressprefix, $index)"> <option value="">--select option--</option> </select> </div> </div> <div class="col-sm-4"> <div class="form-group"> <div class="errorblock"> </div> <input class="form-control" type="text" value="" style="height:32px"> </div> </div> </fieldset> </body> </html>in first 1 use angular filter filter options array, , in second, pass our array function in controller , return options needed show.
i think first method better way, second 1 simpler , easier understand!
edit: solution edit session here!
Comments
Post a Comment