when I use ng-model together ng-value. ng-value returns empty even there is a value given.
for example, there are two controllers called FirstCtrl and SecondCtrl.
This is FirstCtrl, and If I type a value for this input, it will write in my SeconCtrl input since I call ng-value="firstname" in my SecondController:
I can pass the value from firstctrl to secondctrl(I mean first input field to second input field). But the second input field has an ng-model called d_firstname, which doesn't allow to save ng-value but ng-value is displaying the correct value but saves empty because of ng-model(d_firstname). However, i need d_firstname if user wants to enter new value. Moreover, If I type over the input field in the secondCtrl, I can save the record because of d_firstname but if I keep not modifying anything in that input field, returns empty. hope you get the problem. Please someone help on this.. I wanted to pass data from one form to other if checkbox clicked for billing details and shopping details are same
FirstController input:
<input type="text" name="firstname" ng-model="firstname" required>
SecondCtrl input:
<input name="firstname" ng-value="firstname" ng-model="d_firstname">
There is no point in using ng-value and ng-model together.
You could use ng-change event to update the second one
<input name="firstname" ng-model="firstname" ng-change="updateName()" required>
<input name="d_firstname" ng-model="d_firstname">
Controller:
$scope.updateName = function(){
$scope.d_firstname = $scope.firstname
}
Note that you should always use an object in ng-model. You will run into problems with child scopes if you don't
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 have created dynamic form, here I want to send form data to controller. How can do this?
Here is plunker code link https://plnkr.co/edit/xmxDJHTPfJoSFwa2FWCB?p=preview
Issues:
when I change the value then element label also change.
How can I get the form data in product_submit function of controller.
All response appreciated.
Use
<input type="text"
id="module_module"
ng-model="getCol.value"
required="required"
class="form-control col-md-7 col-xs-12"
placeholder="Enter {{getCol.Field}}"
/>
Look here ng-model="getCol.value". You are using filed name as text field model value. Filed name and value are different. That is what you want I suppose.
You can access the values easily from your controller as $scope.getColumn[1].value. Change index or iterate accordingly.
Plunker here
To solve label issues, in your html, I changed ng-model expression to bound into getColumn.Value
In controller, I can read value entered in scope.getColumn[i].Value
I also updated code https://plnkr.co/edit/KlhAb69seMzHsLuhqweR?p=preview
In the ng-model, i want to set a default value defined in my scope but the value is not recognized.
Here's my controller :
$scope.defaultRole = "Admin";
My view :
<input type="text"
class="form-control" ng-model="user.role='{{defaultRole}}'">
but i have {{defaultRole}} instead of Admin in my input text. Maybe it's a problem of formating but i dont know how to make it work.
Note : i can put ng-model="user.role='Admin'" directly, but i want it from the scope.
Thank you for your help !
You don't understand how ngModel works. ngModel expects an assignable angular expression. The expression is bound two way. That means that
to populate the input field, angular evaluates the expression
when the value entered in the input field changes, the variable that the ngModel expression refers to is set to the entered value
So, all you need is
<input type="text" class="form-control" ng-model="defaultRole">
That will read the defaultRole variable and populate the field with its value, and vice versa.
If you want, instead, to populate user.role with the entered value, and the field to have the defaultRole value by default, then it should be
<input type="text" class="form-control" ng-model="user.role">
and the controller should do
$scope.user.role = $scope.defaultRole;
or, if user doesn't exist yet
$scope.user = {
role: $scope.defaultRole
};
to initialize user.role to its default value.
You can do that by using ng-init. ng-model isn't suppose to deal with affectation. This will be done directly by angular.
<input type="text" class="form-control" ng-model="user.role" ng-init="user.role = defaultRole">
Working Fiddle
I have a typeahead input. The input text is set to the option selected on the typeahead. However, I want to clear this text and display the "placeholder" value again on the text box after I select one of the options from typeahead (because I add the selected value to another div in the selectMatch() method.
<input id="searchTextBoxId" type="text"
ng-model="asyncSelected" placeholder="Search addresses..."
typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
typeahead-loading="loadingLocations" class="form-control"
typeahead-on-select="selectMatch(asyncSelected)" typeahead-min-length="3"
typeahead-wait-ms="500">
I tried to set the text value and the placeholder value of the Input element using its Id but that did not work, such as these:
// the input text was still the
$('#searchTextBoxId').attr('placeholder', 'HELLO');
selected result
// the input text was still the selected result
$('#searchTextBoxId').val('');
How can I set or reset the text value ?
I was looking for an answer to this as well, for the longest time. I finally found a resolution that worked for me.
I ended up setting the NgModel to an empty string within the typeahead-on-select attribute:
In your typeahead-on-select attribute add asyncSelected = ''; behind your select function, like so:
<input ...
typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';" />
Making your final typeahead looking something like:
<input id="searchTextBoxId" type="text"
ng-model="asyncSelected" placeholder="Search addresses..."
typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
typeahead-loading="loadingLocations" class="form-control"
typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';"
typeahead-min-length="3"
typeahead-wait-ms="500">
Fiddle adding each selection to an array
Actually this problem is not from typeahead. It is common issue about ng-model, scope and dot notation.
Refer
Scope inheritance in Angular
At your situation, you just change the model name like as xx.selected with dot-notation and set xx.selected empty in typeahead-on-select callback.
To set or reset the value, wouldn't you access the ng-model value, which is asyncSelected according to your code? In a controller:
$scope.asyncSelected = '';
#Asok's answer is fine if you need to immediately clear the value, but for myself, and perhaps others who come here based on the question title, #hey's answer may be better (if terse).
I changed the typeahead as follows:
<input id="searchTextBoxId" type="text"
ng-model="myNewVar.asyncSelected" placeholder="Search addresses..."
typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
typeahead-loading="loadingLocations" class="form-control"
typeahead-on-select="selectMatch(myNewVar.asyncSelected)" typeahead-min-length="3"
typeahead-wait-ms="500">
then, whenever i need to clear the input from my controller, i can call
$scope.myNewVar.asyncSelected = '';
I was already doing as jnthnjns's answer suggested and setting the ng-model's value to an empty string, but the selection popup was not going away because I was (intentionally) using typeahead-min-length="0" so that users could easily see the choices.
It wasn't until I noticed that hitting enter to make a selection actually dismissed the box and it was only on clicks that the box remained. Digging into the ui-typeahead code I saw
// return focus to the input element if a match was selected via a mouse click event
// use timeout to avoid $rootScope:inprog error
if (scope.$eval(attrs.typeaheadFocusOnSelect) !== false) {
$timeout(function() { element[0].focus(); }, 0, false);
}
As soon as I set typeahead-focus-on-select="false" then the box dismisses immediately upon selection (and clearing of the model). It seems obvious now, but I had seen that option before but had read it as automatically selecting on focus (or something like that). Putting this as an answer, just in case it helps someone else.