I am running in to a strange problem and unable to understand whats going on.
I an using the following code
<select ui-select2 class="span4" multiple
ng-model="WhseAssociations"
ng-change="valueChanged(WhseAssociations)"
data-placeholder="Select associated warehouses"
ng-options="whse.WarehouseName for whse in allShipperWarehouses">
</select>
on the controller I have
$scope.WhseAssociations = new Array();
$scope.valueChanged = function(whse){
alert(angular.toJson(whse));
}
the changes made to the selection is not reflected in the WhseAssociations variable of the $scope when i am referring it at a later time, however inside the valueChanged(whse) function the whse is fully populated but the $scope.WhseAssociations is not populated.
so the question I have is what is the scope of this WhseAssociations and how can I access this inside my controller?
ui-select2 is incompatible with <select ng-options>, as per the project description at https://github.com/angular-ui/ui-select2#working-with-dynamic-options
This should do it:
<select ui-select2 class="span4" multiple
ng-model="WhseAssociations"
ng-change="valueChanged(WhseAssociations)"
data-placeholder="Select associated warehouses">
<option value=""></option>
<option ng-repeat="whse in allShipperWarehouses">{{whse.WarehouseName}}</option>
</select>
Related
so I have two dependent select, one for states and the other for cities. It works fine but I can't get the value picked in the first select. I tried everything, the only result I got was the list of all the cities. What I need is which state picked.
My code:
<label>States</label>
<select id="provincia" class="form-control" ng-model="ciudades" ng-options="provincia for (provincia, ciudades) in provincias">
<option value=''>Elegir</option>
</select>
<label>Cities</label>
<select id="ciudad" class="form-control" ng-disabled="!ciudades" ng-model="modelciudad" ng-options="ciudad for ciudad in ciudades" required>
<option value=''>Elegir</option>
</select>
My list is something like this:
$scope.provincias = {Florida:['Miami', 'Orlando']}
I try using ng-model on Option tag but with no result.
Thanks
I have started leaning AngularJS.
In AngularJS if we have to initialize an element lets take an example of select:
<select id="s1" ng-model="vsrc" ng-init="vsrc='a.mp4'">
<option value="a.mp4">First video</option>
<option value="b.mp4">Second video</option>
</select>
why initialization of vsrc='a.mp4' in ng-init is required, when I was giving its value like ng-init='a.mp4' it was not working I had to give like ng-init="vsrc='a.mp4'". In normal HTML statement we are directly giving default option by providing value='a.mp4'
<select id="s1" ng-model="vsrc" ng-init="vsrc='a.mp4'"> /*ng-init used to initialize a **variable** before html render, it is a directive which search left and right value always*/
<option value="a.mp4">First video</option> /*value is here as json object {"value":"a.mp4"}*/
<option value="b.mp4">Second video</option>
</select>
take a look over here about ng-init directive
I'm trying to modify a form which is using a select box that is populate NOT using ng-options.
The form itself is bound to an angular controller. Is there still a way for me to know the selected value of the select box even though the select values were not build using ng-options?
I have the following
<select ng-model="country" ng-change="checkValue()"
but the checkValue function isn't even firing, apparently.
Any thoughts?
You don't need to use ng-options to get the selected value. As long as your select element uses ng-model the value will be stored there.
For example:
<select ng-model="mySelectValue">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
Now in your controller you would be able to access the value of the select using $scope.mySelectValue.
You should always '.' your scope variables.
$scope.address = {};
Then bind to
ng-model="address.country"
I am new to Angular, I have the following code:
<select id="selectUser" class="form-control" ng-change="selectAction()" ng-model="users"
ng-options="value.SignOnId as value.UserName for value in users">
<option value="">Select a User</option>
</select>
As soon as I select a value from the drop down, it executes the selectAction() method and then all values from the drop down disappear, can anybody tell me what's the reason?
change this: ng-model="users" to ng-model="user"
When you select the user, you are setting the users variable to be the selected user, which means your ng-options no-longer has options in it.
I've bound newParty.party_type.code model to dropdown. On changing its value from controller it is adding another option with value ? number:2138 ? even if option with value 2138 is already contained in select element.
<select id="partyType" name="partyType" class="ng-valid valid ng-dirty" ng-model="newParty.party_type.code">
<option value="? number:2138 ?"></option>
<option value="2138">value 1</option>
<option value="1689">value 2</option>
</select>
I also tried converting newParty.party_type.code to string in controller. But it still adds new option with value ? string:2138 ?
<select id="partyType" name="partyType" class="ng-valid valid ng-dirty" ng-model="newParty.party_type.code">
<option value="? string:2138 ?"></option>
<option value="2138">value 1</option>
<option value="1689">value 2</option>
</select>
If I select any option manually, model gets correct value. But via controller, it's not working.
Why is this happening? How does angular data bindings work? Do I need to be type-aware when dealing with model properties?
EDIT1: Options in select tag are loaded dynamically after page load. (after ng app init) I tried putting some static data and it is working fine. It has something to do with angular not being able to process dynamically loaded data outside angular controllers.