I am trying to make a dependent dropdown but somehow the second dropdown is always leaving a blank if i am changing the first dropdown.
<select class="form-control DB_Control" id="Sector" ng-model="selected_sector" ng-init="selected_sector = initial_selected_sector" ng-options="each.sector for each in data track by each.sector" ng-change="getSubsector()">
<select class="form-control DB_Control" ng-model='related_subsector3' ng-options="subsector for subsector in sub_sectors track by subsector" >
$scope.getSubsector = function() {
$scope.related_subsector3 = $scope.sub_sectors[0]
}
Just for more information, if i am printing the value of $scope.related_subsector3 in function getSubsector, its printing correct value but its not setting the value in template.
I don't think that would work. What I would try is to create another function called "$scope.getSubSectorChildren()" which would populate the second dropdown on the change of the first one. That way you can keep the data population more flexible and it would be easier to test/debug.
Related
I have a list of checkboxes as following :
<div ng-repeat="formationType in formationTypeList">
<label>
<input type="checkbox" class="md-warn md-align-top-left"
ng-model="formationSelection[$index]"
ng-true-value="{{formationType}}"
name="formationSelection[]">
{{ formationType.nom }}
</label>
</div>
As you can see this checkboxes are initialized with values in formationSelection[] array.
And when I check some checkbox the value of this checkbox is added to that array.
The formationTypeList contains a list of objects, each object is attached to a checkbox.
In my scenario the first time I have the formationSelection[] empty so when I check some checkboxes and I send my form the values in that array will be stored in a database, and when I back o my application I want to see the checkboxes I've selected so I populate that array whith values from the database and then I can see the ones wich was selected.
The problem I have is the checkboxs are only selected in one case if I have in formationSelection[] the first element or the first, second elements or the first, second and third elements, but when I have for example the second and the fourth elemnts, they are not selected.
this is a plunker for the working case :
http://plnkr.co/edit/I7NK8Tkw3Rzwh1Zj2X78?p=preview
and this is a plunker for the non working case :
http://plnkr.co/edit/82FDQlhTtd09scs9cCDz?p=preview
Why I'm getting this behavior, and how can I solve it ?
Keep formationSelection length the same as formationTypeList, it will work.
$scope.formationSelection = (function(selection,list){
var result = new Array(list.length);
Array.prototype.map.call(selection,function(val,index){
var pos = Array.prototype.map.call(list,function(v,i){
return v.codeFormation;
}).indexOf(val.codeFormation);
result[pos] = val;
});
return result;
})($scope.formationSelection,$scope.formationTypeList);
Plunker here.
I'm using selects to allow a user to switch between events and years. Each change will pull appropriate data from the server, return and update the page. However, the select box goes from the selected value to an empty value. I've looked at numerous solutions and they aren't working.
<select
ng-model="eventName"
ng-options="item.value for item in eventOptions track by item.value"
ng-change="changeEvent(eventName.value)">
</select>
This is the changeEvent function:
$scope.changeEvent = function(eventName){
$scope.eventName = eventName; //wrongly assumed this would update the selected value
$scope.getData($scope.eventName,$scope.eventYear); //this returns the json - correct
$scope.updateSelected(); //meant to update the select field value on the page - fails
};
$scope.eventName or $scope.eventYear values will properly update on a change, but has no effect on the page. The selects just empty of a selected value.
UPDATED (with corrected code)
I wanted to post the changes I made more clearly than the comment allows.
I removed the object param "value" from the options and the argument from the function call (eventName.value).
<select
ng-model="eventName"
ng-options="item for item in eventOptions track by item"
ng-change="changeEvent()">
</select>
And the changeEvent function gets simplified to:
$scope.changeEvent = function(){
$scope.getData($scope.eventName,$scope.eventYear);
};
It all works as expected! Thanks to all, especially Delta who got me looking at it the right way.
So, your event name variable is set to be item. not item.value so instead of passing in changeEvent(eventName.value) try passing in changeEvent(eventName). either way the value you are passing into your method doesnt match the value of your model's variable
item.value for item in eventOptions track by item.value
so for this statement, you are saying make my options ng-model=item but make their value=item.value so they show what you want them to show but still have all the information you need from each one.
Upon further inspection is looks like you dont need:
$scope.eventName = eventName;
$scope.updateSelected();
Angular should be updating your eventName for you, you just need to call the change method.
I'm not sure you need:
ng-change="changeEvent(eventName.value)"
if you use ng-options the model will be updated in the scope automatically on selection. You could watch the value in the controller if you want to do other stuff when it changes:
$scope.$watch('eventName', function() {
//do stuff
});
I would like to set the default item in a select menu based on value rather than by index position. For example, in the sample below, if one of the radio buttons in a form displays "Oranges," and a user selects that radio button, is it possible to make the default selection in the subsequent select menu be Oranges as well? Ideally, I would prefer not to rely on the order of items in the select menu.
<input type="radio" ng-model="selectionList.message" value="{{selection.type}}">
<!--Default selection below should be based on value selected above, regardless of order-->
<select ng-model="editProject.project" ng-options="opt as opt.type for opt in editProject.options">
</select>
Is there a way to set the default based on value rather than the item's position in the select menu?
Not completely sure what you ui is supposed to look like or waht the data structures you are pulling from look like. But in your ng-change it looks like you are using a value that is foreign to the dataStructure you are trying to manipulate. ie. using a array value to return a nested value in an object. see if the below works for the situation. I also did a plnkr.co that shows an example of it working as well. But here are the main snippets that
<input type="radio" ng-model="color"
value="{{radioColors.type[1]}}"
ng-change="match()">Orange<br>
// the select element
<select ng-model="selectValue"
ng-options="selectColor as selectColor.type for selectColor in selectColors"></select>
// this would go in your controller
$scope.match = function () {
angular.forEach($scope.selectColors, function(value, key) {
if(angular.equals(value.type, $scope.color)) {
$scope.selectValue = $scope.selectColors[key]
}
});
}
Per radio input document, you can add a ng-change hook
<input type="radio"
ng-model=""
value=""
[name=""]
[ng-change=""]
ng-value="">
like ng-change="editProject.project = selection.type"
I need to display the next field in my form depending on the last value selected in the form. All fields in my form are independent views, specifically are ng-include.
The idea is not to show all fields when the page loads, and instead, show the next field according to the value selected in the previous field.
Example 1:
My first input (my first ng-include) is a text field, maybe on trigger onBlur check if the value is correct and then show the next field (my second ng-include), then, if that value is correct and then show the next field (my third ng-include).
Example 2:
This time my first input (my first ng-include) is a checkbox field, maybe on trigger onBlur check if the value is correct and then show the next field (my second ng-include), then, if that value is correct and then show the next field (my third ng-include).
Thanks.
Are you familiar with ng-show?
- It shows or hide element depended on value which you declare in ng-show tag.
You can wrap each field (or a group of fields) in ng-form and show the next section depending on the validity of the form of the current section. The fact that elements of the form are delivered via ng-include has little bearing on the approach:
<div ng-form="form1">
<input ng-model="v.one" required min-length="3">
</div>
<div ng-form="form2" ng-show="form1.$valid && !form1.$pending">
<input ng-model="v.two" required min-length="3">
</div>
<div ng-form="form3" ng-show="form2.$valid && !form2.$pending">
<input ng-model="v.three" required>
</div>
This is, of course, at a high-level, and doesn't deal with cases where previous becomes invalid while the next form is showing. For those, more complicated, cases it is better to do the logic in the controller and expose the decision via a function or a scope variable, e.g. showForm2():
<div ng-form="form2" ng-show="showForm2()">
<input ng-model="v.two" required min-length="3">
</div>
I am having one text box and one dropdown.
I want filtering in ng-repeat section based on both of the above control.
Means if i select name in dropdown and in text box as I typing the filtering should work based on name
and if in dropdown if i select EployeeID then filtering should be work based on Employee.
<input id="txtSearchText" ng-model="searchText"/>
<select>
<option>name</option>
<option>EmployeeID</option>
</select>
<div ng-repeat="u in users">
name : {{u.name}} || EID: {{u.eid}} :
<!-- here i want result -->
</div>
The link that domakas directed you to above should help, but the example is slightly different since it filters using 3 different text input boxes.
You are missing a few things here. The first thing is you need to apply a filter to in the ng-repeat for the users div.
<div ng-repeat="u in users | searchText">
The problem that you run into here, which I am sure you are aware of is that it will filter on all of the values in the users array. You seem to want to only filter on the value in the users array that the dropdown has specified. This means we will have to tie the filter to the dropdown in some fashion to make it dynamic.
The way I would do this is to make the filter an object and not just pure text.
$scope.searchText = {name: '', eid: ''};
Now you need to have the model of your input box tied to this object, but where it stores the value needs to be dynamic based on what the value of the dropdown
<input id="txtSearchText" ng-model="searchText[filter]" />
<select ng-model="filter">
<option value="name" selected>name</option>
<option value="eid">EmployeeID</option>
</select>
The above code will store the value of the dropdown in the correct value of the searchText object. This means that the filter will now use this object to filter out the results in the users div instead of just a string, which it would compare to the full JSON object.
Edit:
Added a watch on the 'searchText' object to clear the other value if the dropdown is switched. Without this the old filter value was still in the 'searchText' object, which caused it to filter on both values.
$scope.$watch('filter', function() {
if($scope.filter == "eid") {
$scope.searchText.name = '';
} else {
$scope.searchText.eid = '';
}
});
Here is a JSFiddle with a working example:
http://jsfiddle.net/glandrum101/NM5A5/1/