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
Related
I see a blank drop down, which I suspect is due to an additional option that gets injected. If I am able to remove this additional option generated, I think, my problem will be solved.
Auto-injected Option:
<option value="? number:1 ?" selected="selected"></option>
My View:
<select id="myValue"
ng-model="myObject.value"
ng-change="foo()">
<option value="0"
localize="MyValue0"
ng-selected="myObject.value === 0"></option>
<option value="1"
localize="MyValue1"
ng-selected="myObject.value === 1"></option>
</select>
How can I conver myObject.value to number? I have tried ng-Model = "parseInt(myObject.value)" and ng-model = "myObject.value | number". Both throw a nonassignable element error. I am using Angularjs 1.6 and moving away from directives, so creating angular.directive function may not be an option
I believe it's Angular best practice to use the ngOptions directive, documented here.
Also, regarding the first option being <option value="? number:1 ?" selected="selected"></option>, I suspect that's because the initial value of myObject.value doesn't match any of the possible options values.
Try this:
<select id="myValue" ng-model="myObject.value" ng-change="foo()"
ng-options="item for item in options">
<option value="" disabled selected style="display:none;">Placeholder</option>
</select>
JSFiddle here showing that myObject.value is a number.
Updated JSFiddle to showcase the dropdown without a placeholder.
I am getting empty Option field in select tag.
My code is shown below:
openSelectBoxModel="47"
openSelectList=[{id:""47",name:"text"}];
valuekey="id";
titlekey="name";
<select id="reportOpenSelectBoxSingle" size="6" ng-style='selectStyle' class="openSelectBox" ng-model="openSelectBoxModel" ng-change="changeFn()" >
<option ng-selected="openSelectBoxModel===item[valueKey]" ng-repeat="item in openSelectList" id="" ng-value="{{item[valueKey]}}" ng-title="{{item[titleKey]}}" ng-bind="item[titleKey]"></option>
</select>
Please help me to solve this problem.
You should not use ng-selected with ng-model.
The thing to do is to bind the selected item to your ng-model before displaying it.
//Also, instead of ng-repeat, you should use ng-option
As far as performance is regarded : ng-options does not create child scopes for every iteration. When angular performs its digest, your ng-repeat will slow it. If you have a list with hundreds of elements, you will feel a difference.
<select id="reportOpenSelectBoxSingle"
size="6"
ng-style='selectStyle'
class="openSelectBox"
ng-model="openSelectBoxModel"
ng-change="changeFn()" >
<option ng-repeat="item in openSelectList"
value="{{item[valueKey]}}"
title="{{item[titleKey]}}"
ng-bind="item[titleKey]">
</option>
</select>
Furthermore, you need to declare your variables inside a controller :
$scope.openSelectBoxModel="47";
$scope.openSelectList=[{id:"47",name:"text"}];
$scope.valuekey="id";
$scope.titlekey="name";
having some strange issue with select & ng-repeat.. the value gets bound if i specify it from controller, but not if i get it from api call...
<div>Operator is: {{condition.operator}}</div>
<select ng-model="condition.operator">
<option ng-repeat="operator in operators" value="{{operator.value}}">{{operator.displayName}}</option>
</select>
why this strange behavior?? i tried it with ng-options that solved the problem, so do we have to use ng-options always with select and not ng-repeat??
use ng-options
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
you can do either the both ways
First Method - Working Demo
<select ng-model="condition.operator">
<option ng-repeat="operator in operators" value="{{operator.value}}">
{{operator.displayName}}
</option>
</select>
Second Method - Working Demo
<select ng-model="condition.operator" ng-options="operator.value as operator.displayName for operator in operators"/>
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>
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.