I am really new to AngularJS so my question might be a bit silly. I am trying to solve a problem where I have two input fields which uses the same ng-model and I'd like the put value in one field not have the other input field displaying that value. I know it is desired that when I type in some value in one of the input fields it automatically reflects in the other. I wonder if there's any work around so that when I put value in one input, it does not show up in the other input field.
Here's how you can achieve this:
<input ng-model="foo">
<input value="{{::foo}}">
The second inputs' value will be set to the initial value of foo but it's one time bound. Changing foo after this will no longer affect it.
Furthermore, if you want the second input to update the first but the first not to update the second, you could go:
<input ng-model="foo">
<input ng-init="bar=foo"
ng-model="bar"
on-change="updateFoo()">
// And, inside controller:
$scope.updateFoo = function() {
$scope.foo = $scope.bar;
};
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" />
I have this input:
<input type="number" id="totWeight" ng-model="totWeight" ng-value="getTotWeight()" />
which value is calculated based on other fields, but it can also be inserted manually via the input field.
The problem is that when it's calculated, ng-model remains empty, so I tried to assign the calculated value if (!$scope.totWeight) when I send the data to the server, which is not optimal. Further if I insert a value via the input field and then change the other fields mentioned above which trigger the getTotWeight() function, the $scope.totWeight has a value so it won't get updated with the above if (!$scope.totWeight).
Sorry, I don't know how to explain it. Hopefully someone can help me with that.
The purpose of the NgValue directive is as the docs says
It is mainly used on input[radio] and option elements, so that when
the element is selected, the ngModel of that element (or its select
parent element) is set to the bound value.
So when using input type "number" you should not use it as it's value actually will be in the NgModel instead.
If you want to trigger an event when the input is change, key is press etc you should use the NgChange, NgKeypress etc instead to trigger the function.
The value will be keept in the NgModel for all situations.
I am new to AngularJS, and I have a problem with ng-model.
Here's my code:
<section class="field row" ng-repeat="field in fields">
<input class="value" ng-show="editMode" placeholder="{{field.name}}" ng-model="field.value" type="url" />
</section>
As you can see, I'm looping through $scope.fields which I got from the server and is an array of about 40 objects that have keys like name and value.
Inside the section I have an input, which has the ng-model property set to field.value. When the server gives a value to the field, it is shown inside the input.
At some point I want to update the user's changes, by sending $scope.fields back to the server.
However, when the user changes something in the inputs, the value for the changes fields becomes undefined.
I hope this describes my problem well enough.
Thanks!
To get the changes, you should pass the original object name i.e fields. Refer below calling fn
ng-click="save(fields)"
The reason this caused a problem is simply because the input was a URL input and I was typing simple "hello" strings to test it, instead of typing URLS. Apparently AngulaeJS only puts the answer in the model if it matches the field type.
I'm pretty new to angular world and I have an issue with it.
I'm working with ejs too.
I have an input that I want to fill (value) with an ng-model.
The problem is my model is empty while the user doesn't specify a value.
I want to display a default value when my model is empty. This default value is sending by the ejs (server side). Doing that, I can't set a default value in my controller.
To do so I wrote the following :
<input type="text" ng-model="owner_adress" ng-value="'{{owner_adress || '<%=user.owner_adress%>'}}'"/>
If I look into my code, I can see the value is okay (ejs result when my model is empty, my model value otherwise) but the value is not displayed in my input (ie the user can't see it).
I looked for a work around (ng-cloak was fine but I can't use it in my input field).
Any clue would be nice !
Use ngInit directive instead. If owner_adress is defined in controller it will be used, otherwise it will default to serverside rendered value:
<input ng-model="owner_adress" type="text"
ng-init="owner_adress = owner_adress || '<%=user.owner_adress%>'"/>
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>