This is my Code
var app = angular.module('myExample', []);
function myCtrl($scope) {
$scope.myOptions = [{
"id": 106,
"group": "Employee",
"label": "Id"
},{
"id": 107,
"group": "Employee",
"label": "Name"
},{
"id": 110,
"group": "Department",
"label": "Id"
}];
$scope.getSelectedField=function(){
//$scope.myOption=$scope.myOption;
alert($scope.myOption);
};
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myCtrl">
<select
ng-model="myOption"
ng-options="value.group+'.'+value.label as value.label group by value.group for value in myOptions" ng-change="getSelectedField()" >
<option>--</option>
</select>
<div>
selected value: {{myOption}}
</div>
</div>
The above code selected Item display on dropdown , But I want to display Groupname with Selected Item on Dropdown.for example when user select id now display 'Employee.id' on Dropdown.
Try
Here value.group+'.'+value.label will display on dropdown. Before you were displaying only value.label.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myCtrl">
<select
ng-model="myOption"
ng-options="value.group+'.'+value.label as value.group+'.'+value.label group by value.group for value in myOptions" ng-change="getSelectedField()" >
<option>--</option>
</select>
<div>
selected value: {{myOption}}
</div>
</div>
Related
I have two select box div for gettting scoredetails home teams and awayteams first and second innings
These two div are come in tabs only
So i need same ng-model in both innings for code reusing.but when i am using my browser will hang
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.homePlayers = [{
"id": "586150f2d99139510b4254bb",
"name": "Sachin Tendulkar",
"country": "India"
}, {
"id": "586150f2d99139510b4254b1",
"name": "Saurav Ganguly",
"country": "India"
}];
$scope.awayPlayers =
[{
"id": "586150f2d99139510b4254b2",
"name": "Shane Watson",
"country": "Aus"
}, {
"id": "586150f2d99139510b4254b3",
"name": "Steve Waugh",
"country": "Aus"
}];
});
this is my html content how to populate
<body ng-app="plunker" ng-controller="MainCtrl">
India bat vs Aus bowl<br>
<div class="row">
<select ng-model="battingDetail.batterId">
<option ng-repeat="item in homePlayers" value="{{item.id}}">{{item.name}}</option>
</select> <select ng-model="bowlingDetail.bowlerId">
<option ng-repeat="item in awayPlayers" value="{{item.id}}">{{item.name}}</option>
</select>
<a ng-click="submitScores('hometeam')">UPDATE SCORE</a>
</div>
Aus bat vs India bowl<br>
<div class="row">
<select ng-model="battingDetail.batterId">
<option ng-repeat="item in awayPlayers" value="{{item.id}}">{{item.name}}</option>
</select> <select ng-model="bowlingDetail.bowlerId">
<option ng-repeat="item in homePlayers" value="{{item.id}}">{{item.name}}</option>
</select>
<a ng-click="submitScores('awayteam')">UPDATE SCORE</a>
</div>
</body>
I have two select box div for gettting scoredetails home teams and awayteams first and second innings
These two div are not come in same page in my webpage tabs only.But when i am using this way ny browser will hang.
So i need same ng-model in both innings for code reusing.but when i am using my browser will hang
i have a cascading select option, and is working well, the problem is that when i change the first selected option, in the second selection option (subcategory), it keeps the index. So case i change the category (first select), in the second selection it goes to the option position that it was.
For better understanding, please check this example i made and try changin the options. You will notice that in the second selec option keeps the position index that had in the previous category selected. It doesnt starts to 0 when changing the category.
Link: http://jsfiddle.net/Fqfg3/28/
Js:
var app = angular.module('app', []);
app.controller('PeopleCtrl', function ($http,$scope) {
vm = this;
vm.options = [
{
"_id": "1",
"label": "Category 1",
"childs": [
"Category 1 -> Subcategory 1",
"Category 1 -> Subcategory 2",
"others"
]
},
{
"_id": "2",
"label": "Category 2",
"childs": [
"Category 2 -> Subcategory 1",
"Category 2 -> Subcategory 2",
"others"
]
},
{
"_id": "3",
"label": "Category 3",
"childs": [
"Category 3 -> Subcategory 1",
"Category 3 -> Subcategory 2",
"others"
]
}];
});
html:
<div ng-app="app" ng-controller="PeopleCtrl as ctrl" class="container">
{{ctrl.options}}
<div class="form-group question-wrapper">
<select class="form-control"
name="category"
ng-options="option.label for option in ctrl.options track by option._id"
ng-model="ctrl.supportMail.selected">
</select>
</div>
<div class="form-group question-wrapper">
<select id="sub" class="form-control"
name="subcategory"
>
<option ng-repeat="child in ctrl.supportMail.selected.childs track by $index">{{child}}</option>
</select>
</div>
</div>
You can use ng-change in main select to reset the subselect to default.
Here's is a demonstration working:
(function() {
"use strict";
angular.module('app', [])
.controller('mainCtrl', function() {
var vm = this;
vm.options = [
{
"_id":"1",
"label":"Category 1",
"childs":[
"Category 1 -> Subcategory 1",
"Category 1 -> Subcategory 2",
"others"
]
},
{
"_id":"2",
"label":"Category 2",
"childs":[
"Category 2 -> Subcategory 1",
"Category 2 -> Subcategory 2",
"others"
]
},
{
"_id":"3",
"label":"Category 3",
"childs":[
"Category 3 -> Subcategory 1",
"Category 3 -> Subcategory 2",
"others"
]
}
];
vm.reset_subSelect = function() {
vm.supportMail.child = vm.supportMail.selected.childs[0];
}
});
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl as ctrl">
<div class="container">
<div class="form-group question-wrapper">
<select class="form-control" name="category" ng-options="option.label for option in ctrl.options track by option._id" ng-model="ctrl.supportMail.selected" ng-change="ctrl.reset_subSelect()" ng-init="ctrl.supportMail.selected = ctrl.options[0]">
</select>
</div>
<div class="form-group question-wrapper">
<select class="form-control" id="sub" name="subcategory" ng-options="child for child in ctrl.supportMail.selected.childs" ng-model="ctrl.supportMail.child" ng-init="ctrl.supportMail.child = ctrl.supportMail.selected.childs[0]">
</select>
</div>
</div>
</body>
</html>
I hope it helps.
By adding an ng-model to your subcategory I was able to resolve the issue you can see the example here
Hope this helps.
My domain is such that Bars have Groups. The following code allows the user to pick a Bar (outputted to {{selected.bar.name}}). Users are to choose a Bar.
If a Group only has one Bar then the Bar is presented at the top level (step-0), otherwise the user can drill down into the Group and select the Bar from there (step-1).
In the below code, Bar 1 and Bar 2 are their only ones in their group, whilst Bar 3 and Bar 4 share a group, Group 3.
Everything works well apart from the following sequence:
Select Group 3
Select any Bar
Click Previous
Select any other Bar
Selecting Group 3 again does not take you to step-1 again; the ng-change event is not fired.
(function(ng) {
'use strict';
ng.module('awesome', [])
.controller('BarController', [
'$scope',
function($scope) {
$scope.bars = [{
"id": 1,
"name": "Bar 1",
"group": "Group 1"
}, {
"id": 2,
"name": "Bar 2",
"group": "Group 2"
}, {
"id": 3,
"name": "Bar 3",
"group": "Group 3"
}, {
"id": 4,
"name": "Bar 4",
"group": "Group 3"
}];
$scope.currentTab = 'step-0';
$scope.previousTab = null;
$scope.goBack = function() {
$scope.currentTab = $scope.previousTab;
$scope.previousTab = null;
}
$scope.groupedBars = _.groupBy($scope.bars, 'group');
$scope.selected = {}
$scope.availableGroupedBars = $scope.groupedBars;
$scope.availableBars = $scope.bars;
$scope.groupSelected = function(group) {
console.log('groupSelected');
$scope.currentTab = 'step-1';
$scope.previousTab = 'step-0';
$scope.availableBars = group;
}
}
]);
})(window.angular);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.1/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="awesome">
<div ng-controller="BarController">
<div ng-include="currentTab"></div>
Selected bar name: {{selected.bar.name}}
<button ng-show="previousTab" ng-click="goBack()">Previous</button>
</div>
<script type="text/ng-template" id="step-0">
<ul>
<li ng-repeat="(key, group) in availableGroupedBars">
<label ng-switch="group.length">
<span ng-switch-default>{{key}}</span>
<input ng-switch-default type="radio" name="group" ng-model="selected.group" ng-value="group" ng-change="groupSelected(selected.group)" />
<span ng-switch-when="1">{{group[0].name}}</span>
<input ng-switch-when="1" type="radio" name="group" ng-model="selected.bar" ng-value="group[0]" />
</label>
</li>
</ul>
</script>
<script type="text/ng-template" id="step-1">
<ul>
<li ng-repeat="bar in availableBars">
<label>
{{bar.name}}
<input type="radio" name="bar" ng-model="selected.bar" ng-value="bar" required />
</label>
</li>
</ul>
</script>
</div>
How can I make the ng-change event for Group 3 fire once returning to step-0?
The change event is not fired because nothing changes. You only have one group and that group is still selected when you go back. It stays selected forever, i.e the value of $scope.selected.group never changes, regardless of what radio button you choose.
The ngChange expression is only evaluated when a change in the input value causes a new value to be committed to the model.
I strongly suggest to rethink your approach. If you don't want to then you can add an ng-change to your bars in step-0 and clear $scope.selected.group whenever a bar is selected.
$scope.clearGroup = function() {
$scope.selected.group = null;
};
<input ng-switch-when="1" type="radio" name="group"
ng-model="selected.bar" ng-value="group[0]"
ng-change="clearGroup()" />
First look at my fiddle
JavaScript:
function CountryCntrl($scope) {
$scope.filters = {};
$scope.categories = [{
"id": 1,
"title": "Company",
"children": [{
"id": 2,
"title": "About",
"children": [{
"id": 6,
"title": "Company profile",
"children": [],
"isRoot": false
}],
"isRoot": false
} ..
}
HTML:
<div class="row" ng-controller="CountryCntrl">
<div class="col-lg-12">
<h4>Filter by:</h4>
</div>
<div class="col-lg-12">
<form>
<div class="row">
<div class="col-xs-4" ng-repeat="cat in categories" ng-if="cat.isRoot==true">
<div class="form-group">
<select ng-if="cat.isRoot==true" class="form-control" ng-model="filters.rootCat" ng-options="sub_cat.title for sub_cat in cat.children track by sub_cat.id">
<option value="">level 1 - {{$index}}</option>
</select>
</div>
<div class="form-group">
<select class="form-control" ng-model="filters[cat.id]" ng-options="sub_sub_cat.title for sub_sub_cat in filters.rootCat.children track by sub_sub_cat.id">
<option value="">level 2 - {{$index}}</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
I'm not able to display the options of the select of the second level only, related to the first level.
In my fiddle you can see that you change the value of "level 1-0" the select below "level 2 - 0" is correctly populated but is binded the "level 2 - 6" too...
What's wrong ?
The problem is that you have an ng-repeat in which you use the same object as model for each item repeated, which means they will conflict and affect each other.
The simplest solution is probably to change filters.rootCat to filters['rootCat'+$index].
That way you ensure that each column of dropdowns have their own model.
I am using select2 with angularjs for select boxes in my application. There is one parent select box where user can select multiple groups and there are many other child select boxes with the same group selection feature.
My problem is how to restrict child group search options according to
parent group selected option. i.e. say if parent groups are Group1,
Group2, Group3 then the child group search box should avail the
options selected in parent groups only.
HTML:
<body ng-app="myModule">
<div ng-controller="myCtrl">
<div ng-repeat="activity in activities">
<br><br><br><br>
<div>
Parent Group:
<select multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_group_id" ng-init="activity.act_group_id=split_custom(activity.act_group_id,',',1)" data-placeholder="Select Group">
<option ng-repeat="group in groups | orderBy:'text'" value="{{group.id}}">{{group.text}}</option>
</select>
<p>selected parent groups {{activity.act_group_id}}</p>
</div>
<br><br>
<div>
Child Group:
<select multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_auto_approve_group" ng-init="activity.act_auto_approve_group=split_custom(activity.act_auto_approve_group,',',1)" data-placeholder="Select Group">
<option ng-repeat="group in groups | orderBy:'text'" value="{{group.id}}">{{group.text}}</option>
</select>
<p>selected child group {{activity.act_auto_approve_group}}</p>
</div>
</div>
</div>
</body>
JS:
var activityModule = angular.module('myModule', ['ui']);
activityModule.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.activities = [{"act_name": "activity1", "act_group_id": "62,68", "act_auto_approve_group": "62"}];
$scope.groups = [{"text": "Group1", "id": 2}, {"text": "Group2", "id": 62}, {"text": "Group3", "id": 68}, {"text": "Group4", "id": 74}, {"text": "Group5", "id": 98}, {"text": "Group6", "id": 104}, {"text": "Group7", "id": 107}, {"text": "Group8", "id": 139}, {"text": "Group9", "id": 149}, {"text": "Group10", "id": 154}];
$scope.groupSetup = {
multiple: true,
formatSearching: 'Searching the group...',
formatNoMatches: 'No group found'
};
// custom function to convert string into attay (string arra or integer array)
$scope.split_custom = function(string, spliter, is_integer) {
$scope.ret_arr = string.split(spliter); // convert string into array
if (is_integer==1)
$scope.ret_arr = $scope.ret_arr.map(Number); // convert string array into integer array
return $scope.ret_arr;
};
}]);
http://plnkr.co/edit/dpX7jNkEgRoPyRZpJV92?p=preview
After 6 hours struggle, I was able to achieve this using ng-change event in a tricky way:
HTML :
1.Parent select box:
<select ng-change="parent_group_changed(activity)" multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_group_id" ng-init="activity.act_group_id=split_custom(activity.act_group_id,',',1)" data-placeholder="Select Group" >
<option ng-repeat="group in groups" value="{{group.id}}">{{group.text}}</option>
</select>
2.Child select box:
<select multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_auto_approve_group" ng-init="activity.act_auto_approve_group=split_custom(activity.act_auto_approve_group,',',1)" data-placeholder="Select Group">
<option ng-repeat="group in activity.act_groups | orderBy:'text'" value="{{group.id}}">{{group.text}}</option>
</select>
JS
$scope.groups = [{"text": "Group1", "id": 2}, {"text": "Group2", "id": 62}, {"text": "Group3", "id": 68}, {"text": "Group4", "id": 74}, {"text": "Group5", "id": 98}, {"text": "Group6", "id": 104}, {"text": "Group7", "id": 107}, {"text": "Group8", "id": 139}, {"text": "Group9", "id": 149}, {"text": "Group10", "id": 154}];
$scope.groups2 = $scope.groups;
$scope.groupSetup = {
multiple: true,
formatSearching: 'Searching the group...',
formatNoMatches: 'No group found'
};
$scope.parent_group_changed = function(activity) {
activity.act_groups=[];
for(var i=0; i<activity.act_group_id.length; i++)
{
var x = activity.act_group_id[i];
activity.act_groups.push($filter('filter')($scope.groups2, {id:x})[0]);
}
};
Plunker
http://plnkr.co/edit/07Uj8EdDlAyT54AkuaRQ?p=info