I am generating a dynamically text boxes using angularjs. I set a array in controller and repeating in view with ng-repeat. Here is controller code :-
this.total_options = [
{text : 'form.options.Option1' , placeholder: 'Enter Option Here'},
{text: 'form.options.Option2', placeholder: 'Enter Option Here' }
];
Now in view i am repeating this options like :-
<li data-ng-repeat="option in mcssController.total_options">
<input required="required" type="text" ng-model="option.text" class="option" placeholder="{{option.placeholder}}" />
</li>
But when page is rendered the textbox showing ng-model property 'form.options.optoin1' instead of placeholder('Enter Option Here'). How can i solve this problem ?
See if you clear out the form, you should be able to see the placeholder!
Try:
<li data-ng-repeat="option in mcssController.total_options">
<input required="required" type="text" ng-init="model=$eval(option.text)" ng-model="model" class="option" placeholder="{{option.placeholder}}" />
</li>
You want ngModel to bind to a model, not a property that represents a string. Since you want to interpret the string as a model, you can use $scope.$eval. It should work if you use $scope.$eval in an ngInit expression, and then use result to bind to ngModel.
Related
I have a set of projects in an object each projects come with this HTML section
<label class="checkbox-container">
<input ng-click="addProcurementToPlan(project)"
ng-show="showCheckBox()"
class="checkbox"
type="checkbox">
<span class="checkmark"></span>
</label>
I want to ensure that if a property in my project is true then my HTML checkbox should show checked or selected.
When I inspect my HTML element when I click the checkbox I can't see the angularjs property that is making my tag look selected or checked for me to write a function for it.
The ng-selected directive only works for <select> tags.
For input of type "checkbox", use the ng-checked directive instead.
<input ng-click="addProcurementToPlan(project)"
ng-show="showCheckBox()"
class="checkbox"
type="checkbox"
ng-checked="property">
If $scope.property is true, then your box should be checked.
I have a datetimepicker.
Overall, it works fine and updates the text box fine. However, when I place a ng-model onto the input field, nothing gets passed through to the binding at the bottom of the page.
Here!s the form I'm using :
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' ng-model="package.timeA" value="" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
This is my JS code :
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
For the input box give some id or class name then initialize datepicker with that id or class
<input type='text' ng-model="package.timeA" value="" class="mydatePicker form-control" />
$('.mydatePicker ').datetimepicker();
It will work.
You can try to use $apply who allow to force reload of the variable and $setViewValue who allow to set the variable of the view.
add ng-change on your input tag and pass the date.
In your controller you can make a function like this:
$scope.onChange = function(package.timeA)
{
$scope.$apply(function (){
YourCtrl.$setViewValue(package.timeA)
}
}
I want to set a input text field of formular from JSON object, which is value of select option. I have a data in AngularJS controller, after selecting combobox, data is changed, but text field doesn't be filled.
https://github.com/lijunwu001/jstree_with_select.git
Here is demo link on github.
In general it's wrong approach. To see your error you can change your code from
<div ng-repeat='node in vm.selected'>
ID: <input type='text' ng-attr-value='{{ node["id"] }}' />
Description: <input type='text' ng-attr-value='{{ node["text"] }}' size='35'/><br />
</div>
To:
<div ng-repeat='node in vm.selected track by $index'>
Just symbol: <input type='text' ng-attr-value='{{ node }}' />
</div>
It looks strange, doesn't it? It's because you cant bind object to "select" like
<select ng-model='vm.selected' required>
After your click on "select" option your value of vm.selected is just string, but not an object. And you are doing ng-repeat with symbols of this string.
You could use the ng-change directive
We have a dynamic Form being rendered based on database configurations. I am using code as mentioned in the below fiddle
But am not able to get the value of the checkbox element selected. Please guide me through this.
I am using checklist-model for Checkbox Elements.
<label ng-repeat="cCheck in form.color">
<input type="checkbox" checklist-model="outputs[form.databaseAttr]" checklist- value="cCheck" ng-init="outputs[form.databaseAttr] = form.defaultValue"> {{cCheck}} <br>
</label>
Fiddle Link
Please let me know if we have anybetter way of handling Dynamic Forms. Something like jQuery Serialize where we pass the formId and get all elements from the form.
There is a checklist-directive developed to solve the checkbox problem. You can download check-list.js and add it as the module dependency as following:
var exampleApp = angular.module('example', ["checklist-model"]);
So, in your html, you should use checklist-model and checklist-value instead of ng-model and ng-value respectively:
<div ng-switch-when="checkbox">
<br>{{form.text}} <br>
<label ng-repeat="cCheck in form.color">
<input type="checkbox" checklist-model="outputs[form.databaseAttr]" checklist-value="cCheck" ng-init="outputs[form.databaseAttr] = form.defaultValue"> {{cCheck}} <br>
</label>
</div>
Try it yourself.
EDIT: In order to set default values of the checkbox, you can put the values that you want into the outputs[from.databaseAttr] array. In your case, defaultValue:
{
text: 'select mutiple colors',
databaseAttr: 'checkbox',
type: 'checkbox',
color: ['red', 'blue', 'black'],
defaultValue: ['blue'] // <-- blue is set as default
}
JsFiddle.
I am trying to use AngularJS Validation in order to validate a simple form, however I was having troubles getting my ng-class to show the correct class based off whether or not the input was dirty or not. Then when I looked at the actual HTML of the page, the <form> tags are not even in the document at all!
<form novalidate name="infoForm">
<p>To start, provide some basic information about the project.</p>
<ul class="ulFormGeneral">
<li>
<label>Company name</label>
<input id="CompanyName" ng-class="{ cvError : infoForm.CompanyName.$dirty }" ng-model="form.CompanyName" name="CompanyName" maxlength="100" type="text" required />
</li>
</ul>
</form>
I want the cvError class to be added to this input if it is dirty, but nothing happens when I look at this in the browser. What am I doing wrong that is causing the <form> to just leave the DOM and then not work with my Angular expressions?
Welcome to the Angular world, no forms required! Here, the model is king. It looks like the problem is the ng-model and ng-class are point at different places.
Point everything at form.CompanyName (assuming that is the model name is form in the $scope):
<input id="CompanyName" ng-class="{ cvError : form.CompanyName.$dirty }" ng-model="form.CompanyName" name="CompanyName" maxlength="100" type="text" required />
The ng-model binds to the $scope. When you change the input field, it is automatically updated in the $scope. No form is needed or hitting a submit button to get the data. The $scope is updated with each key stroke.
The controller should do the work of figuring out what to do with the changes in the model. For example, you can add an ng-click to a button that fires a function defined by the controller to save the model.