I have a select element that is repeated by a ng-repeat directive when the
"**Addbutton**" clicked . the object that fills the select element has a
format like this :
{ id: 1, Title: 'AAA', priority: 1 },
I want when user selects an option from this combo box and clicks on the "*
*Addbutton**",
in the next row only options that have **priority** greater than **the
previous selected item priority** would be list and shown .
<h4> This is my code :</h4>
<!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 for 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 the plunk <http://codepen.io/anon/pen/WxeQvY>
<h3> Edit </h3>
I have some ideas how to to do it when "Addbutton" clicked but I am
wondering how its possible to achieve this functionality when there are
some active combo boxes and user selects or changes the option of one of
them.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
