I have made the following plunker:
https://plnkr.co/edit/Ff2O2TGC4WLaD62fJmvA?p=preview
I would like the value of the input to be the item.name clicked.
Here is the code:
<body ng-app="myApp">
<div ng-controller="MyController">
<ul ng-repeat="item in collection">
<li ng-click="edit('{{item.name}}')">{{item.name}}</li>
</ul>
</div>
<input name="myinput" ng-model="myinput" />
</body>
Js:
var app = angular.module('myApp', [])
.controller('MyController', function($scope, $http) {
$scope.collection = [
{name:'foo'},
{name:'bar'},
{name:'foobar'},
{name:'barfoo'},
];
$scope.edit = function(current_name) {
this.myinput = current_name;
console.log(current_name);
}
})
So there are a few problems here. The first is how you're passing item.name into the edit function. Instead of edit('{{item.name}}') it should simply be edit(item.name).
The next is this.myinput in the script.js isn't going to work; it needs to be $scope.myinput.
Finally, the input in the markup needs to be inside the div that defines the controller.
I've modified the Plunkr to work: https://plnkr.co/edit/mslpklTaStKEdo64FpZl?p=info
Angular expression can't have interpolation tags. Correct syntax, like if it was normal Javascript:
<li ng-click="edit(item.name)">{{item.name}}</li>
You don't have to call a function. Just do.
<li ng-click="$parent.myinput = item.name">
Related
I have div which has some markup inside it. Basically some form fields which I want to save too on submission.
Outside this div, I have an input field where user can type an integer. Based on this integer, I would like to show or ng-repeat items.
Here's the sample code matching my problem. Kept a span inside of any form elements to focus on main issue of ng-repeat.
var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
$scope.myNumber = 3;
$scope.getNumber = function(num) {
return new Array(num);
$scope.$apply();
}
$scope.$watch('myNumber', function(newVal,OldVal){
$scope.myNumber = newVal;
//alert(newVal);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="ctrlParent">
<input type="text" ng-model="myNumber" ng-blur="getNumber(myNumber)"/>
<ul>
<li ng-repeat="i in getNumber(myNumber) track by $index">
<span>{{$index+1}}</span>
</li>
</ul>
</div>
</div>
here's what I tried :
Watching the variables and assigning newValue of input to scope variable does not help.
I tried using ng-blur to call the same function with updated value. Oh yes, ng-change was tried too.
Used $scope.$apply() inside getNumber function out of desperation to manually update the changes.
How do I proceed with it ? Is there any way to update the ng-repeat?
It is not an issue of ng-repeat, you have used input of type text.
Change it to number or use parseInt.
You do not need to use ng-blur, $watch, $scope.$apply() for detecting the changes in your case.
You got this part wrong: <input type="text" ng-model="myNumber">, in which you should change the input to type number.
new Array() accept number and you pass text over it.
var app = angular.module('myapp', []);
app.controller('ctrlParent', function($scope) {
$scope.myNumber = 3;
$scope.getNumber = function(num) {
return new Array(num);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="ctrlParent">
<input type="number" ng-model="myNumber" />
<ul>
<li ng-repeat="i in getNumber(myNumber) track by $index">
<span>{{$index+1}}</span>
</li>
</ul>
</div>
</div>
for(var i=0;i<a.length;i++){
$scope.inputs=[
{name:a[i],value:b[i]}
];
}
this is my Javascript code i want to know how to write (ng-repeat) for arrays
Your JS is invalid, will produce length 1 array. Replace it with this:
$scope.inputs=[];
for(var i=0;i<a.length;i++){// be sure that a.length >=b.length
$scope.inputs.push({name:a[i],value:b[i]}); // push will add new entry to your inputs array.
}
The you can use it in ng-repeat:
<div ng-repeat="entry in inputs"> {{entry.name}} : {{entry.value}} </div>
You don't write loops surrounding a global variable. You leave the variable by itself and then you call the loop. Later you just use the global variable in the html code.
I made a cool snippet so you understand how it works:
angular.module('demo', [])
.controller('Ctrl', ['$scope', function ($scope) {
$scope.inputs = [];
var a = ['name1', 'name2', 'name3'];
var b = [133,233,456];
//this code has to be called somewhere else. It might be part of a function.
for(var i=0; i < a.length; i++){
$scope.inputs.push( {name:a[i],value:b[i]} );
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="Ctrl">
<ul>
<li ng-repeat="item in inputs">
<input ng-model="item.name"/>
</li>
</ul>
<!--This is only to display the content of $scope.inputs -->
<pre>{{inputs | json}}</pre>
</div>
</div>
If you have an array in your controller, with a scope that is visible in your html
angular.module('appName').controller('mainCtrl', mainCtrl);
function mainCtrl($scope) {
$scope.inputs = [
key: value,
...
];
}
In your html you would use ng-repeat within the scope of the controller. You can use the ng-repeat directive on several different html tags, such as <ul> lists, a div, select dropdowns and more
<div ng-controller="mainCtrl">
<ul>
<li ng-repeat="item in inputs">{{item.key}} <!-- Prints 'value' --></li>
</ul>
</div>
In this code below, i like to be able to make the length of my menu dynamic with Angular data binding by taping it in the input and getting it in real time.
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Number of characters : <input type="number" ng-model="nmba" ></p>
<ul>
<li ng-repeat="x in chars track by $index">
{{ x}}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
function printCharacters(param) {
var result = [];
for (i = 1; i <= param; i++) {
result.push('a');
}
return result;
}
$scope.chars = printCharacters($scope.nmba);
});
</script>
So i wrote it as above but it is not displaying anything. Am i missing something ?
Thank you for any help.
This is becuse printCharacters called just on controller init and at this point $scope.nmba =""
You need to call this func on any change in input field.
<input type="number" ng-model="nmba" ng-change="printCharacters(nmba)">
Also you need to expose printCharacters to $scope
$scope.printCharacters = function(nbma){}
How can I store values to variable for example on click in angular? I have the following code which doesn't save the value into variable:
HTML:
<div ng-app='app'>
<a ng-controller="MyController" href="#" ng-click="variable = 1">
</a>
{{variable}}
</div>
Controller:
var app = angular.module('app',[]);
app.controller('MyController', function($scope)
{
});
jsfiddle code
Your variable binding {{variable}} should be inside controller's scope. So move ng-controller to an element that will contain variable binding.
You need to initialize the variable. See http://plnkr.co/edit/dmSNVJ3BGIeaWaddKtZe
<body ng-app="">
<button ng-click="count = 1" ng-init="count='not set'">
Increment
</button>
<span>
count: {{count}}
</span>
</body>
Use a function to set the variable:
HTML:
<div ng-app='app'>
<a ng-controller="MyController" href="#" ng-click="setVariable()">
</a>
{{variable}}
</div>
Controller:
var app = angular.module('app',[]);
app.controller('MyController', function($scope)
{
$scope.setVariable = function() {
$scope.variable = 1;
}
});
Your syntax is correct, what went wrong is you put your controller declaration in the wrong place.
You just need move it to the outer layer, no need for ng-init or function (but might be a better practice):
<div ng-app='app' ng-controller="MyController">
<a href="#" ng-click="variable=1">
click me!
</a>
{{variable}}
</div>
http://jsfiddle.net/ybavzec4/3/
Here when i click on cartDetails the dynamic scope variable x.SmId value need to be passed to the bellow function and in alert box need to display the parameter .How can we do this one in angular js?
<div ng-app="" ng-controller="MyCtrl">
<div ng-repeat="x in names">
<div ng-click="cartDetails('{{x.SmId}}')">
<div>{{x.name}}</div>
</div>
</div>
</div>
<script>
angular.module('MyApp', [])
.controller('MyCtrl', ['$scope', '$http', function($scope, $http) {
$scope.search = function(param) {
$http.get('AngularJs-Response.jsp?mid='+param).success(function(response) {
$scope.names = response;
});
};
$scope.cartDetails = function(smid) {
alert(smid);
};
}]);
</script>
Use simple:-
ng-click="cartDetails(x.SmId)"
I tried to use:
ng-click="cartDetails(x.SmId)"
but it simply x.SmId as string, its not replaced by value. After reading few more articles, I found a solution like below:
<div ng-click="cartDetails('{{x.SmId}}')">
Its a working solution in AngularJS v1.3.9