Lets say, I'm having 5 text box which are created dynamically. All fields having default value that are coming from database and that are binded to input field.
<html>
<div data-ng-repeat="Input in InputArray">
Input Field
<label>{{$index + 1}} : </label>
<input type="text" data-ng-model="Input.InputValue" data-ng-change="" />
</div>
<div>
Calculated Result :
<label>{{CalculatedValue}}</label>
</div>
<div>
<input type="button" name="Update Calculated Result to 3rd Input Field" data-ng-click="" />
</div>
</html>
I'm having label which have Calculated value. Its value is updated from another input field.
I want to update particular / only one text box value from that label value on a button click.
Is it possible to update by using ID of input field?
You don't need any DOM manipulation. The input field is two-way bound to the model, so all you need to get the field value is to get the corresponding model value.
So, to get the third input field value, since it's bound to the InputValue field of the third Input object in InputArray, all you need is
$scope.CalculatedValue = $scope.InputArray[2].InputValue;
Similarly, if you want to set the third field value with the value contained in CalculatedValue, all you need it
$scope.InputArray[2].InputValue = $scope.CalculatedValue;
Related
Actually i am retrieving data from BD and showing it in p element as below:
<p>{{customerDetailData.Name}}</p>
but i want to take this data as the value of the input field in form, as like below:
<input type="text" id="businessname" name="businessname" ng-model="data.businessname" ng-value="customerDetailData.Name" >
It's taking the value from input field but only if i am doing any modification in that input field but it's not taking that value if i left that field as it.
Please help me, Thanks
You should assign the value of data.businessname variable in the controller with the value of customerDetailData.Name and the ng-value attribute will not be needed anymore.
http://jsfiddle.net/ADukg/13589/
You can use ng-init="data.businessname=customerDetailData.Name" as below code.
<input type="text" id="businessname" name="businessname" ng-init="data.businessname=customerDetailData.Name" ng-model="data.businessname" ng-value="customerDetailData.Name" />
Angular and Ionic Application
I have a form that has a lot of <select> elements, The form offers the user to select from a list or if the <option> = 'Other' then I show another <input> to enter the value. I then save the value to another ng-model.
<select data-ng-model="minor.tests.liveEarth"
name="minorTestLiveEarth"
required>
<option></option>
<option>>200</option>
<option>>299</option>
<option>>500</option>
<option>>1000</option>
<option>Other</option>
</select>
</label>
<label class="item item-input item-stacked-label" ng-show="minor.tests.liveEarth === 'Other'">
<span class="input-label">Please Specify</span>
<input type="text"
placeholder="live earth other"
ng-maxlength="10"
data-ng-model="minor.tests.liveEarthOther"
name="minorTestLiveEarthOther">
</label>
I originally used <datalist> but doesn't show up on iOS.
I assigned the liveEarthOther to the same as the <select> liveEarth but it has 'Other' assigned to the ng-model, which then the user has to delete the input value Other before entering their value.
I have looked for a combobox kind of control but haven't found one that works properly.
How could I make this into a directive or any thing suitable that could perform the renaming without the user having to delete the value.
I want to use this functionality many times in the application I am building.
You may have overcomplicated things by re-using the ngModel. If you change the value minor.tests.liveEarth you'll mess up your select because anything other than the given values will cause nothing to be selected. But if you don't change minor.tests.liveEarth then you'll have to delete it when the user fills in the text input. This would then also mess up the select box!
What I would do is record the value of the text input to a different variable. Keep the ng-show="minor.tests.liveEarth === 'Other'" as it is, but change your input to
<input type="text"
placeholder="Fill in your other live earth"
ng-maxlength="10"
data-ng-model="tempVar" />
This way the input will be still be recorded, but the select won't be messed up on the ngModel change. Due to the placeholder, the user will know that they have to fill in the text box.
In your js, you'll have to create a validating function when the form is submitted along the lines of:
var validateLiveEarth = function(){
if(minor.tests.liveEarth === "Other"){
//check that tempVar meets validation
//assign tempVar to whatever form you're sending
}
}
I need to display the next field in my form depending on the last value selected in the form. All fields in my form are independent views, specifically are ng-include.
The idea is not to show all fields when the page loads, and instead, show the next field according to the value selected in the previous field.
Example 1:
My first input (my first ng-include) is a text field, maybe on trigger onBlur check if the value is correct and then show the next field (my second ng-include), then, if that value is correct and then show the next field (my third ng-include).
Example 2:
This time my first input (my first ng-include) is a checkbox field, maybe on trigger onBlur check if the value is correct and then show the next field (my second ng-include), then, if that value is correct and then show the next field (my third ng-include).
Thanks.
Are you familiar with ng-show?
- It shows or hide element depended on value which you declare in ng-show tag.
You can wrap each field (or a group of fields) in ng-form and show the next section depending on the validity of the form of the current section. The fact that elements of the form are delivered via ng-include has little bearing on the approach:
<div ng-form="form1">
<input ng-model="v.one" required min-length="3">
</div>
<div ng-form="form2" ng-show="form1.$valid && !form1.$pending">
<input ng-model="v.two" required min-length="3">
</div>
<div ng-form="form3" ng-show="form2.$valid && !form2.$pending">
<input ng-model="v.three" required>
</div>
This is, of course, at a high-level, and doesn't deal with cases where previous becomes invalid while the next form is showing. For those, more complicated, cases it is better to do the logic in the controller and expose the decision via a function or a scope variable, e.g. showForm2():
<div ng-form="form2" ng-show="showForm2()">
<input ng-model="v.two" required min-length="3">
</div>
I'm trying to make a form that can contain complex "fieldtypes". ie. A group of fields that work together to manipulate the value of a single field.
Each of these fieldtypes contains a single field that will hold the actual "value" of the field.
The fields containing the real data will have ng-model="" attributes attached to them. The PublishController will be monitoring these fields. If there are fields without an ng-model on them, it doesn't care about it.
Is it possible to make a form only consider itself dirty/pristine by the fields with ng-model on them?
I don't mind having to put a class/attribute on all the fields I want it to watch specifically, if thats an option.
Here's an example of the code:
<div ng-controller="PublishController">
<form name="publishForm" ng-submit="save()">
<div class="fieldtype">
<!-- there might be a bunch of form elements in here that a user can manipulate to alter the value that the PublishController is concerned with -->
<input class="helper-field-1" />
<input class="helper-field-2" />
<!-- then the inputs above will perform their own logic, and output their value to this field, which the form *is* concerned with -->
<input type="hidden" name="myfield" ng-model="data.myfield" />
</div>
<div class="fieldtype">...</div>
<div class="fieldtype">...</div>
<!-- one of the goals of this is to only show the submit button when the *actual* values have been modified, not the helper fields -->
<button ng-disabled="publishForm.$pristine">Save</button>
</form>
</div>
Is what I'm describing possible?
Thanks!
I am trying to use ng-repeat to iterate through an array of keys and display the scenario value associated with each key. The view code worked when the key value was hardcoded. Now that ng-repeat provides the key, the input field does not initially display the associated scenario value. I am using AngularJS 1.2.21.
This is the controller code that sets up $scope:
$scope.keys = KEYS; // array of strings
$scope.scenario = scenario; // object containing key: value pairs
This is the view code that generates the input:
<form name="gameSettingsForm" novalidate ng-submit="validateAndSaveSettings()" class="form-horizontal" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group" ng-repeat="key in keys">
<div class="col-md-3">
<input type="number" required ng-disabled="readOnly" class="form-control"
ng-model="scenario[key]"
id='{{key}}' name='{{key}}'>
<p>input contains {{scenario[key]}}</p>
</div>
</div>
</div>
</div>
</form>
When the page loads, the input field is empty even though the "input contains" text correctly displays the scenario[key] value. How do I get the value to display in the input field when the page loads?
UPDATE:
I had commented out all but one of the KEY array items. After activating them, most of the generated input fields are empty when the page loads. However some of them populate when the page loads. All the "input contains" strings always correctly display their scenario[key] values.
WORK AROUND:
Realized the scenario values that were displayed had been modified via multiplication. Made the problem go away by multiplying all scenario values by 1 before displaying.
The solution is to make sure the model values are numbers for inputs with type "number". I did this via multiplication:
value = value * 1;
I created a stand alone example that demonstrates the issue occurs when model values are not numbers: http://plnkr.co/qnFHafmIOWVW6eWkQsmk