I was trying to pass the dynamically created model value to my controller. The div and model was created dynamically. But i can't fetch the model value in my controller.
This is the model part.
<div ng-repeat="cnt in countDiv">
<div id="subDiv_{{cnt}}" >
<select ng-model="Id_['{{cnt}}']" ng-change="getDetails(cnt)">
<option value="">Select</option>
<option ng-repeat="Data in details">{{Data.name}}</option>
</select>
</div>
</div>
How can I get this model valueng-model="Id_['{{cnt}}']" in my controller ?
I works for me
<div ng-repeat="cnt in countDiv">
<div id="subDiv_{{cnt}}" >
<select ng-data-model="Id_{{cnt}}"ng-change="getDetails(cnt);">
<option value="">Select </option>
<option ng-repeat="Data in details">{{Data.name}}</option>
</select>
</div>
I have done similar as your for dynamic model .
$scope.inputs = ['foo','bar'];
$scope.filter={
'foo':"Foo",
'bar':"Bar"
}
});
and i implemented using ng-repeat like this
<div ng-repeat="filter in filters">
<input type="text" ng-model= "'Id_'+ filter" />
</div>
If i understood you right, i have made a plunker .This might help you.
Related
I am using AngularJS. I have a select tag. The tag's value is bound by ng-model. The ng-model variable has a value (coming from server). That value does not show up in the select dropdown tag. It shows up in a normal text box though.
How can I get the ng-model value ('blue' for below example) show up in the dropdown?
Please refer - http://jsfiddle.net/9w5XT/2446/
<select ng-model="blisterPackTemplateSelected"
data-ng-options="blisterPackTemplate as blisterPackTemplate.name for
blisterPackTemplate in blisterPackTemplates">
<option value="">Select Account</option>
</select>
<hr>
<input type="text" ng-model="blisterPackTemplateSelected" />
It should be
<select ng-model="blisterPackTemplateSelected"
data-ng-options="blisterPackTemplate.name as blisterPackTemplate.name for
blisterPackTemplate in blisterPackTemplates">
Check this fiddle
I think you must have the same model in array which you use in dropdown like this which you use for selected.
<div ng-app="App" >
<div ng-controller="ctrl">
<select ng-model="blisterPackTemplateSelected"
data-ng-options="blisterPackTemplate.name as blisterPackTemplate.name
for blisterPackTemplate in blisterPackTemplates">
<option value="">Select Account</option>
</select>
<hr>
<input type="text" ng-model="blisterPackTemplateSelected" />
</div>
</div>
var app=angular.module('App', []);
function ctrl($scope){
$scope.itemList=[];
$scope.blisterPackTemplateSelected = 'blue'
$scope.blisterPackTemplates=[{id:1,name:"a"},{id:2,name:"b"},{id:4,name:"c"},{id:3,name:"blue"}]
}
So my problem is as follows, i have this HTML
<div class="col-sm-4">
<p><span>Teste A/B:</span></p>
<label class="label-radio">
<input type="radio" class="radio" name="ab-test" value="true" ng-model="isTestAvailable"> Sim </label>
<label class="label-radio">
<input type="radio" class="radio" name="ab-test" value="false" ng-model="isTestAvailable"> Não </label>
</div>
<div class="col-sm-4">
<p><span>Nº de testes:</span></p>
<select class="form-control" ng-model="tests.number">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
What i'm trying to do is make it so that when the user changes the select to another value i generate the given amount of test inputs via ng-repeat
<div ng-if="isTestAvailable == 'true'" ng-repeat="test in tests">
<hr>
<div class="row">
<div class="col-sm-12">
<h3>Test {{$index}}</h3>
<p><span>Specifications:</span></p>
<textarea id="teste1" class="form-control" onkeyup="resizeTextarea('test1')" data-resizable="true"></textarea>
</div>
</div>
<hr>
</div>
My controller contains this $watch
$scope.$watch("tests.number", function(newVal, oldVal) {
$scope.tests = [{}];
var i = parseInt(newVal);
for(var x = i; x <= newVal; x++) {
$scope.tests.push({});
}
});
that i tried to use in order to change the amount of test objects when the value changes, i tried using a simple variable as well and doing ng-repeat("i in tests.number") instead but that didn't work, what can i do so that the ng-repeat works with my given select option value?
I suggest to you, to use another variable instead of tests.number because you override it in your watcher.
Please check this plunker : https://plnkr.co/edit/XnV9MKjIYe1YOL4hR6Le?p=preview
I use another variable and bind ng-change instead of watch
<select class="form-control" ng-model="testNumber" ng-change="changeTestNumber()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I am new to angularjs. I want to add a placeholder to my dropdown.
I am not hard coding my dropdown values, it's coming from some where. Can you tell me where i did mistake.
<div class="row form-group">
<label class="col-md-3">Action<span style="color: #b94a48">*</span></b></label>
<div class="col-lg-3 col-md-7" style="padding: 0px;">
<div class="dropdown select" style="width: 100%;">
<select name="wlOrdActType" class="dropdown multiple" placeholder="-- Please Select --"
ng-model="wlOrdActType"
ng-options="obj.name as obj.name for obj in ordertypeList"
style="width: 100%;">
<option></option>
</select>
</div>
</div>
</div>
Here every thing is working. But placeholder is not place on the dropdown
<option value="" disabled selected>Please Select</option>
You can do something like this:
<select ng-model="wlOrdActType" ng-options="obj.name as obj.name for obj in ordertypeList">
<option value="" selected="selected">Choose one</option>
</select>
Could also try this:
<select required class="form-control" ng-model="myModel"
ng-options="item as item.title for item in list">
<option value="" label="-- Select option --" disabled selected="selected">
</option>
</select>
While having the model set to an empty string in the controller.
$scope.myModel = "";
I am using Angular v1.6.6. So, check for older version's compatibility. I believe the below code should work v1.5 onwards.
$scope.ordertypeList = ordertypeListFromApiCall; // Get the collection from API
$scope.ordertypeList.splice(0,0, {'id' : '', 'name' : 'Select Order Type...' } );
$scope.wlOrdActType = $scope.ordertypeList[0];
And in the HTML,
<select class="form-control" ng-model="wlOrdActType" required ng-options="ordertype.name disable when ordertype.id == '' for ordertype in ordertypeList track by ordertype.id">
</select>
In the itemSelected function, make sure that the id of $scope.wlOrdActType is not empty
I have created one dropdown by using rest API in angular JS.
<div class="form-group">
<label for="address" class="col-lg-4 col-md-4 col-sm-4 control-label">Country</label>
<div class="col-lg-7 col-md-7 col-sm-7 col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<select ng-model="selectCountry" class="selectpicker" ng-options="item.name for item in countryList">
<option value="">Select Country</option>
</select>
</div>
</div>
My controller
angular.module('myWebApp').controller('signInController',function ($scope){
alert("sign clicked" + $scope.selectCountry);
});
But my '$scope.selectCountry' is showing [object] [object]. Please help.
I can't see what your countryList array looks like but your ng-options most likely needs to be:
item.countryId as item.name for item in countryList
value / name / entry / array
So in your case, since you didn't specify the value, the value became the whole object.
https://docs.angularjs.org/api/ng/directive/select
Why is this repeater broken
<select name="quarter" ng-model="Quarter" ng-selected="Quarter" >
<option ng-repeat="v in [1,2,3,4]" value="{{v}}">Q{{v}}</option>
</select>
But not the handwritten way?
<select name="quarter" ng-model="Quarter" ng-change="onQuarterChange()" ng-selected="Quarter">
<option value="1">Q1</option>
<option value="2">Q2</option>
<option value="3">Q3</option>
<option value="4">Q4</option>
</select>
stick with ng-options
<div ng-app>
<h2>Todo</h2>
<div ng-controller="QuarterController">
<select name="quarter" ng-model="Quarter" ng-options="obj.value as obj.text for obj in [{'value': 1,'text' : 'Q1'},{'value':2,'text':'Q2'},{'value':3,'text':'Q3'},{'value':4,'text':'Q4'}]">
</select>
</div>
</div>
function QuarterController($scope) {
$scope.Quarter = 2;
}
http://jsfiddle.net/hDNsm/3/
you might as well define the array in your controller
Notice two things:
'ng-selected' directive should be written on the 'option' element and not on the 'select' element.
the content of the 'ng-selected' attribute should be a condition in which the option is selected. a simple example for this could be if the value of the option equals the select model.
Your code should be something like this:
<select name="quarter" ng-model="Quarter">
<option ng-repeat="v in [1,2,3,4]" value="{{v}}" ng-selected="v==Quarter">Q{{v}}</option>
</select>