I have an array of objects that I bind to the scope. My view then accesses the objects via ng-options like this:
<div class="tile block box-shadow">
<form role="form">
<div class="form-group">
<label>Reason for change</label>
<select class="form-control" ng-options="item.value as item.description for item in controller.priceChangeReasons" />
</div>
</form>
</div>
but the dropdown has nothing when you select it.
I have logged the priceChangeReasons and can see that the array is working and returning values.
I have made a codepen to show the issue:
http://codepen.io/r3plica/pen/XbQzMa?editors=101
I realise this is probably a syntax error on my part, but I can't see it.
Can someone help?
ngOptions directive requires ngModel, just add:
<select class="form-control" ng-options="item.value as item.description for item in controller.priceChangeReasons" ng-model="controller.reason" />
and all should work
Related
Clone div is repeating, when I click add button.
How can I post the fields inside clone div.
<div class="row" id="append-row">
<div class="clone-div-{{count}}" id="clone-div">
<div class="col-md-6">
<div class="form-group input-group-sm">
<label>Title</label>
<input type="text" class="form-control" id="addTitle" placeholder="Title" ng-model="chapters.chapter.title">
</div>
</div>
<div class="col-md-6">
<div class="form-group input-group-sm">
<label>Select Language</label>
<select class="form-control" name="country" id="country" ng-model="chapters.chapter.languageID" ng-options="value.ID as value.language for value in technical.languages">
<option value="">Select Country</option>
</select>
</div>
</div>
</div>
</div>
This part is angularjs code.
$scope.count = 1;
$scope.addChapter = function() {
var iEl = angular.element( document.querySelector('#append-row') );
var wEl = angular.element( document.querySelector('#clone-div') );
iEl.append(wEl.clone());
$scope.count+=1;
};
You should do cloning/repeating inside the template in a ng-repeat and have the data prepared beforehand, that is a much cleaner way. You'll notice for example in the template code you have, all the ng-model's are the same, and will always display the same information if you have 1 'clone' div or 100.
A better method would be to write your clone div in the template and use it as a repeatable ng-template 'script', for example:
// main template
<script type="text/ng-template" id="cloneable.html">
// Your code here, but change reference to ng-model, ie this line as an example:
<input type="text" class="form-control" id="addTitle" placeholder="Title" ng-model="chapters.chapter[$index].title">
</script>
// main template, your new repeat then includes the repeatable script
<div ng-repeat="foo in manyFoos"
ng-include="'cloneable.html'"></div>
This way you can use the $index that arises from ng-repeat, as part of the model to accurately separate each individual repeat block. In your controller, chapters.chapter will be an array of objects.
I don't know about the 'add' button part or what information you're adding, but the above should take care of the model problem you'll be encountering.
I have validation issue if i use k-ng-model on field that field is not required with Angularjs validation , User can submit the form so below code field is required even i dont select the value user can still submit the form.. Any idea how to solve it ?
main.html
<div class="row">
<div class="form-group col-md-12">
<label for="themesList" class="required col-md-4">Themes:</label>
<div class="col-md-8">
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
k-ng-model="challengesDTO.themesKyList" required
id="themesList"></select>
<p class="text-danger" ng-show="addChallengeForm.themesList.$touched && ddChallengeForm.themesList.$error.required">Theme(s) is required</p>
</div>
</div>
</div>
You can use ng-model with k-ng-model, Try assigning ng-model to a seperate variable and use ng-required.
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
k-ng-model="challengesDTO.themesKyList" ng-model="challengesDTO.themesKyListValue" ng-required
id="themesList"></select>
This solution worked for me: kendo ui, angular require validation for numeric text box
Just create a hidden input for the each kendo widget and bind the model from your k-ng-model also to the ng-model of the hidden field. The k-ng-model seems to be no NgModelController, which is why the validators cannot hook into the models $validators and do their work.
<input kendo-date-time-picker k-ng-model="$ctrl.event.endDate"></input>
<input type="hidden" name="endDate" ng-model="$ctrl.event.endDate" required></input>
I am using ng-repeat in angularjs to display several checkboxes.
<div class="checkbox" ng-repeat="subject in priceinformation.subjects">
<label>
<input type="checkbox" ng-model="priceinformation.subscriptioninfo.subject.name"> {{subject.name}}
</label>
</div>
The problem is all the checkboxes are using the same model, hence if I check one, all are checked. I want to do it in a way that the model can resolve to different values. e.g.
ng-model="priceinformation.subscriptioninfo.subject.{{subject.name}}"
{{subject.name}} should resolve to something like English, History etc, hence a different model for each checkbox.
But ng-model="priceinformation.subscriptioninfo.subject.{{subject.name}}" is giving an error.
Note: {{subject.name}} is resolving correctly used elsewhere, and 'priceinformation.subscriptioninfo.subject' is working correctly.
Use [] instead of .
ng-model="priceinformation.subscriptioninfo[subject.name]"
Plnkr Demo
Script
$scope.priceinformation ={};
$scope.priceinformation.subjects = [{"name":"English"},{"name":"History"},{"name":"Maths"}];
$scope.priceinformation.subscriptioninfo ={};
<div ng-repeat="item in checks">
<input type="checkbox" ng-model="item.checked">{{item.name}}
</div>
See Plunkr
I have one query regarding dropdown selected value.
Project dropdown
$rootScope.projects = response;
First I am getting project list by using angularjs.
This is my Project dropdown.
Whenever doing edit how can I set proper value to project dropdown.
<div class="form-group width50">
<label class="width30 marginTop fl">Project Name</label>
<div id="selectProject_dd" class="selectbox travel_drop-downs width50 push-right-10 push-top-15">
<div class="select">
<span class="tr_txt">Please Select Project</span>
</div>
<span class="admin-sprite f_dropdown_icon"></span>
<select id='project-dropdown' ng-model="projectDropDown"
ng-selected="projectDropDown"
ng-options="project as project.projectName for project in projects"
ng-change="onchangeProject(projectDropDown)">
</select>
</div>
</div>
You can use the following code:
<select ng-init="projectDropDown = projects[0]" id='project-dropdown' ng-model="projectDropDown" ng-options="project as project.projectName for project in projects"
ng-change="onchangeProject(projectDropDown)"></select>
By using ng-init directive, and this question make ng-init more clear for you.
I am iterating over a array of strings with ng-repeat
<div ng-repeat="i in mdsecuritysensorswsize">
in there I have a required select with a 'dynamic model'
ng-model="valueBag[i+'sizes']"
now I want to add a has-error class, if the select is empty (apply bootsrap3 error style)
ng-class="{'has-error': myForm.valueBag[i+'sizes'].$invalid, 'has-success': !myForm.valueBag[i+'sizes'].$invalid}"
But this doesn't seem to work with such a dynamic ng-model name.
Here is the complete code:
<div ng-repeat="i in mdsecuritysensorswsize">
<div class="form-group">
<div class="col-md-2"
ng-class="{'has-error': myForm.valueBag[i+'sizes'].$invalid, 'has-success': !myForm.valueBag[i+'sizes'].$invalid}"
>
<select class="form-control" required
ng-options="resText[j] for j in mdsecuritysensorswsizesizes2"
ng-model="valueBag[i+'sizes']"></select>
</div>
</div>
</div>
Am I missing something here?
this from the comments did the job:
if you create your form inputs dynamically, it will be a problem with this code when you try to access myForm.valueBag[i+'sizes'].$invalid If you create form inputs dynamically, check out my directive to solve this problem here: stackoverflow.com/questions/21455695/… – Khanh TO Feb 3 at 10:04
AngularJS dynamic form field validation
THX #Khanh TO