Sorry, english is my second language.
Here is my problem. I had bound two textboxes to the scope. Each textbox needs to affect the other on changes. You'll understand that it cause conflict. From now, I've got that :
<input type="text" ng-model="celcius" ng-change="farenheit=celcius * 9/5 + 32 || ''">
<input type="text" ng-model="farenheit" ng-change="celcius=(farenheit - 32) * 5/9 || ''">
But it doesn't work properly. Any idea how to trick that ?
You need to use type="number" instead of type="text" so the expression in the ng-change directive can calculate the values as numbers instead of text.
Related
Enter the Dollar Amount <br>
1--<input type="text" ng-model="dollar1" ></input> <br>
2--<input type="text" ng-model="dollar2" ></input> <br>
3--Not Working-<input type="text" ng-value="{{dollar1 * dollar2}}" ></input> <br>
4--Working<input type="text" value="{{dollar1 * dollar2}}" ></input> <br>
5--Working<input type="text" ng-value="dollar1 * dollar2" ></input> <br>
Although the 5th one works if we use ng-value without curly braces
If you use the Angular-Directive ng-value, the expression passed in is treated as an Angular code which can directly interpret dollar1 and dollar2 as scope-variables.
AngularJS will process the directive ng-value and will add/set the result in the value attribute of the correspondig input element.
Using the html-built-in attribute value, you will need to use the curly braces to inject Angular code.
In this case AngularJS will just replace the expression {{dollar1 * dollar2}} to its result.
Your Not Working example is not working because the AngularJS-directive is already expecting some real program code which must not start with curly braces. It should directly start with interpretable code.
I use a bootstrap modal for a form in my code.
So, I need standard-values for two textfields, and I tried to simply use VALUE like
<input type="text" value="myStandardText" ng-model="something">
I think it's because of the ng-model, but why?
And do you know a way to get the same result as with value, too?
(For now, I use "placeholder" instead, but value would be better)
UPDATE: Ok, i got a step closer.
<input type="text" ng-model="e_uname" ng-init="e_uname = 'a std txt'">
does the trick, but i need now to set a saved value as init-value.
i added "uname" to my scope, but with input it doesn't work.
<input type="text" ng-model="e_uname" ng-init="e_uname = {{uname}}">
I tried also with different quote marks. Any ideas?
Ok guys, I found the answer.
Final solution is:
<input type="text" ng-model="e_uname" ng-value="uname">
Consider this HTML
...
<label>Weight:
<input type="text" ng-model="weight">
</label><br>
<label>Height:
<input type="text" ng-model="height">
</label><br>
<label>
BMI: {{bmi}}
</label>
...
and this JavaScript
...
$scope.bmi = +$scope.weight / +$scope.height * +$scope.height;
...
If I give values to the weight and height input fields in the browser, why doesn't the BMI field get updated? Obviously when the controller loads for the first time, the $scope.weight and $scope.height values are empty. But once they get values from the view, why doesn't $scope.bmi use these new values? I have found numerous solutions for this problem (by using $watch or calling a function that updates the bmi value), but could somebody explain WHY the code above does not work?
It is because $scope.bmi is calculated for one time only when controller loads. you will have to make bmi property to be computable or dependable to calculate everytime you change the value of height and weight
See the demo code here to see how can we make dependent properties in angularjs
It's because your bmi here is an affectation. This is set the 1st time you call the controller and never change. Because your var is just a primitive value,i t's not a binding, just a value. A binding could work with a function store on factory for example.
With a function you can update the value.
<label>Weight:
<input type="text" ng-change="updateBMI()" ng-model="weight">
</label><br>
<label>Height:
<input type="text" ng-change="updateBMI()" ng-model="height">
</label><br>
<label>
BMI: {{bmi}}
</label>
And then in your controller you will have the update function :
$scope.updateBMI = function(){
$scope.bmi = +$scope.weight / +$scope.height * +$scope.height;
}
I am learning Angular.js and i've come to a problem that should probably be simple, but I can't seem to find an answer on.
I want to create form inputs with the value of "connectedTeams", like this in html:
<input type="text" name="connectedTeam[]">
<input type="text" name="connectedTeam[]">
<input type="text" name="connectedTeam[]">
I have tried the following in angular...
<input type="text" name="connectedTeams[]" class="form-control" ng-model="user.connectedTeams">
...but it is binding the same value to all 3 inputs. I know in my mind that this makes sense, but I can't seem to figure out how to tell it that ng-model is user.connectedTeams.[] (user > connectedTeams > add to an array.
I hope this makes sense enough for someone to provide a quick answer.
ng-model="user.connectedTeams[0]"
ng-model="user.connectedTeams[1]" and so on
You can put it in a ngRepeat, so you don't need to repeat your code like above.
FYI, name is only used for validation in Angularjs.
I have a problem adding a number from a textbox and place it on another textbox. My situation is like this:
I have one textbox:
<input type="text" ng-model="num1" />
And whatever the input is on this textbox, this will be the value of another textbox like this:
<input type="text" value="{{ num1 + 1 }}" />
This setup shows successfully but with errors. When I type 2013 on the first, the second shows 20131 instead of 2014.
I also tried using filters like this:
<input type="text" value="{{ num1 + 1 | number}}" />
but unfortunately, it doesn't work. What did I miss?
The value of a textbox is a string.
You need to convert it to an integer/float you can do that using parseInt or parseFloat if you have decimals. By default you don't have the parseInt method available in your expression, but you can add it to the scope in your controller to make it available:
$scope.parseInt = parseInt;
<input type="text" value="{{ parseInt(num1) + 1 }}" />
You can see this in action here
You can also use input type=number instead of text. This also has the added benefit of providing a type that matches what you expect to get.
num1 is being interpreted as a string.
Use parseInt() or parseDouble() to convert this to a number when initializing it.
I found a tick method to solve. My case is that I need to parseInt something like item.qty. But I found <div ng-click="item.qty = parseInt(item.qty) + 1>Add</div> won't work.
Finally, I found this method can solve
<div ng-click = "item.qty = item.qty - 1 + 2">Add</div>