How to define a ng-model dynamically when using $index - javascript

I wan't to use $index in order to create a new $scope variable:
<div ng-repeat="i in items track by $index">
<input autocomplete="off" type="text"
ng-model="myVariableName{{$index}}" >
....
I wan't to declare the variable: myVariableName0, myVariableName1, etc...

In the controller declare empty object
$scope.myVariableName = {};
And in the template assign the model value as a property of an object.
ng-model="myVariableName[$index]"

Instead of doing this you can have an array, and each item of that array can refer to the current ng-model via ng-model="myVariableName[$index]"

angular.module('app', [])
input,
span {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<input type='text' ng-repeat='temp in [0,1,2,3]' ng-model='$parent["myVariableName" + $index]' />
<span>0: {{myVariableName0}}</span>
<span>1: {{myVariableName1}}</span>
<span>2: {{myVariableName2}}</span>
<span>3: {{myVariableName3}}</span>
</div>

Related

Angular JS access input values based ng-model stored in a string

So I managed to generate and import an html code like
<input type="text" ng-model="text1">
<input type="text" ng-model="text2">
and I obtained a String array containing the ng-models of all such inputs in an array from a $http.post request like
$scope.ngmods=['text1','text2']
how do I get the values of the inputs by manipulating the array elements?
Here is what I have tried :
{{ {{ngmods[0]}} }}
like i tried to get the value of in the array element and then again enclosed it in the {{ }} hoping the results would be the same as {{text1}}
use $parse to evaluate the expression against scope.
create a custom filter with $parse to get the scope value from a string
.filter('parserFil',function($parse){
return function(item,scope){
return $parse(item)(scope);
}
})
in the html pass the current scope this from the html to filter
{{ngmods[0] | parserFil : this}}
angular.module("app",[])
.controller("ctrl",function($scope,$parse){
$scope.ngmods=['text1','text2'];
})
.filter('parserFil',function($parse){
return function(item,scope){
return $parse(item)(scope);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="text1">
<input type="text" ng-model="text2">
{{ngmods[0] | parserFil : this}}
</div>
angular.module('todoApp', [])
.controller('TodoListController', ["$scope",
function($scope) {
$scope.setValue = setValue;
function setValue() {
var list = [];
list.push($scope.text1);
list.push($scope.text2);
$scope.ngmods = list;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="todoApp">
<div ng-controller = "TodoListController">
<input type="text" ng-model="text1">
<input type="text" ng-model="text2" ng-blur="setValue();">
<span>{{ngmods[0]}}</span>
</div>
</div>
Use ng-repeat & make sure html in under ng-controller
Example
<html>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">{{x}}</h1>
<script>enter code here
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Amar",
"Mhatre"
]
});
</script>
</body>
</html>

Angular using ng-model in input field get null

I know how to pass a value from a view to a controller using ng-model. In the controller it just gets the value from the view using this code $scope.name = this.ngmodelnameinview.
Is it compulsory to use ng-model in field view?
but my problem now is, I have + button, which when I click the button it will automatically put the value inside input text field.
<button data-ng-click="adultCount = adultCount+1"> + </button>
<input type="text" name="totTicket" value="{{adultCount}}">
see picture below:
but when I add ng-model inside input field, it returns null
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultcount">
How to fix this? Thanks!
It is giving null just because you have set a value "adultCount" and in ng-model you had given a different name "adultcount" ('c' is in lower case). By updating ng-model with "adultCount", will solve this issue.
JavaScript is case sensitive:
JavaScript is case-sensitive and uses the Unicode character set.1
Use the same case for the scope variable. Update the input attribute ng-model to match the varible - i.e.:
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultcount">
should be:
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultCount">
<!-- ^ -->
See this demonstrated in the snippet below:
angular.module('app', [])
.controller('ctrl', function($scope) {
//adultCount could be initialized here
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button data-ng-click="adultCount = adultCount+1"> + </button>
totTicket:
<input type="text" name="totTicket" value="{{adultCount}}">
totTicket (adultCount):
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultCount">
</div>
——
1https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types

Two way binding an array of strings in ng-repeat

I have an array of strings, and I want each of the strings to be bound to an input.
However, editing the input doesn't seem to update the array (isolated scope issues maybe?).
Suggestions?
function Ctrl($scope) {
$scope.fruits = ['Apple', 'Mango', 'Banana', 'Strawberry'];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="Ctrl">
<div style="margin: 20px 0" ng-repeat="fruit in fruits">
<input type="text" ng-model="fruit" />
</div>
Fruits: {{fruits}}
</div>
</div>
You need the array reference which you can get from $index. Note however that this won't work if any filtering is done on the ng-repeat as the indexing then is based on filtered array not the original
<div style="margin: 20px 0" ng-repeat="fruit in fruits track by $index">
<input type="text" ng-model="fruits[$index]" />
</div>
DEMO
Ok, so it seems to me like a case of
'ng-model requires a dot in the model name to work correctly with the
scope, otherwise it would create a local scope'
What i would suggest is to change your data structure from plain strings to objects containing the strings as a property, something like :
$scope.fruits = [
{'title':'Apple'},
{'title':'Mango'},
{'title':'Banana'},
{'title':'Strawberry'},
];
Now, when you bind it to ng-model like this
<div style="margin: 20px 0" ng-repeat="fruit in fruits">
<input type="text" ng-model="fruit.title" />
</div>
then it will not create any local/child scope, instead it would be able to bind to the title property on the items in the fruits array.
example fiddle: http://jsfiddle.net/HB7LU/24008/

Is there a way to use $index in angular as the model in an ng-repeat?

I have a factory that I am pushing values to from my controller my controller.
.factory("Inputs", function(){
var inputs = {
};
inputs.editors = [0];
return inputs;
})
I want to use $index as the model when I loop through it like so
<div class="texteditors">
<div class="form-group" ng-repeat="editor in app.inputs.editors">
<textarea class="form-control" name="{{$index}}" ng-model="inputs.editors[{{$index}}]" id="" cols="30" rows="10"></textarea>
</div>
</div>
but it won't evaluate, the only way I was able to get it to evaluate is like this:
but now its a string it evaluates to inputs.editors['0']
I want to then loop through the ng-models and evaluate them {{inputs.editors[0]}} to how ever many text areas are added. I am not sure if I explained properly.
Should I use directive to create the binding, how would I be able to evaluate the textareas and models that are being generated from pushing the values to the factory?
Here you go:
http://codepen.io/jlowcs/pen/ogJBVm
A few things were wrong with your markup.
You also need to add track by to your ng-repeat, otherwise you will lose focus every time the model changes because the textarea is recreated by the ng-repeat.
HTML:
<div class="texteditors" ng-controller="MyCtrl as app">
<div class="form-group" ng-repeat="editor in app.inputs.editors track by $index">
<textarea class="form-control" ng-model="app.inputs.editors[$index]" id="" cols="30" rows="10"></textarea>
</div>
<div class="form-group" ng-repeat="editor in app.inputs.editors track by $index">
<div>{{app.inputs.editors[$index]}}</vid>
</div>
</div>
JS:
app.controller('MyCtrl', function($scope, Inputs) {
this.inputs = Inputs;
})
.factory("Inputs", function(){
var inputs = {};
inputs.editors = ['foo', 'bar'];
return inputs;
})
You only need the curly brackets when you are dealing with strings. As #DimaGimburg also said, get rid of them in your ngModel.
<div class="texteditors">
<div class="form-group" ng-repeat="editor in app.inputs.editors">
<textarea class="form-control" name="{{$index}}" ng-model="inputs.editors[$index]" id="" cols="30" rows="10"></textarea>
</div>
</div>
ng-model expects an angular expression. That means that you don't need the {{}} notation.
<textarea class="form-control" name="{{$index}}" ng-model="inputs.editors[$index]" id="" cols="30" rows="10"></textarea>
On the other hand, name doesn't expect an angular expression. Thats why you needed the {{}} there.

Angular JS how to pass value from rootscope into ng-model?

I have object into rootscope and i would like to display some values in form inputs.
I tried following:
<input type="number" ng-model="$root.order.id" class="form-control" id="orderNumber" />
But this is not working.
How i should pass value into ng-model?
Thanks for any help.
No need of attach de $root to the variable, the flow of scope in angular is first search in the local scope for the variable, if not found search the property in $scope.parent, and the rootScope if the high level of parent if not match with any else, then search there.
http://plnkr.co/edit/3ENyPRwrFq5ssR2uLtQy
In this plnkr look the usage of the root scope
Controller:
app.controller('MainCtrl', ["$scope", "$rootScope", function($scope, $rootScope) {
$rootScope.varRoot = {
element: "Jesús"
};
}]
);
HTML:
<body ng-controller="MainCtrl">
<p>Hello {{varRoot.element}}!</p>
<input type="text" ng-model="varRoot.element">
</body>
Just use the name, ex:
$rootScope.order.id = 3;
<input type="number" ng-model="order.id" class="form-control" id="orderNumber" />

Categories