I have a button code block in jsp below which will pass $index of a selected checkbox to a javascript function in controller js which is defined on $scope. But when i try to print the $index on console i am getting undefined value for $index.
Code in Jsp
<button type="button" class="btn btn-warning"
ng-disabled='validCheckbox'
**ng-click="addTemplate($index)">**
<i class="glyphicon glyphicon-plus"></i> Add Middle
</button>
Code in Js.
$scope.addTemplate = function(index){
console.log("index"+index);
You can use $index only in ng-repeat in angular.js. Here is an example of how to use $index.
Let say you have StringArray=['a','b','c'];
<div ng-repeat="c in StringArray">
<label>{{$index}}</label>
</div>
The result is :0, 1, 2
Related
I have iterated dropdown and I would like to know what is the position of each of these dropdowns when I click on it.
<div class="row" ng-repeat="animal in vm.animals">
{{animal}}
<btn-group uib-dropdown>
<button class="btn btn-secondary btn-sm uib-dropdown-toggle
ng-click="vm.checkPosition($event)">{{vm.test}}
</button>
<div class="dropdown-menu" uib-dropdown-menu>
<a class="dropdown-item" ng-repeat="dog in vm.dogs">
{{dog}}
</a>
</btn>
function checkPosition($event) {
// I tried use here $event.target.el.getBoundingClientRect().top, but this
// position isnt element which I clicked, but propably first element with
// this class
}
As the docs describe, you have access to certain variables inside of your ng-repeat.
For example $first is true only for the first element, $last only for the last one.
What you are looking for is $index
If you mean the index of the array you can use $index as Scorpioo590 mentioned. which in angularjs will give you the item's index in the array that is used in the ng-repeat you can use it like this:
ng-click="vm.checkPosition($event, $index)"
function checkPosition($event, index) {
console.log(index);
}
In protractor, I am trying to access the buttons repeated withina specific div with id 'CreateRFQID'. These buttons are defined a directive 'gps-button-bar'. I am trying to access them by.repeater. Because these buttons also appear else where in the page, I can not just access them through
element(by.repeater('aBtn in buttonBarController.config.buttonConfigs track by $index')).
But I am trying without success to get those buttons that are sub element of the div with id 'CreateRFQID'.
Protractor code I am trying:
var parent = element(by.css('#CreateRFQID'));
var first= parent.element(by.repeater('aBtn in buttonBarController.config.buttonConfigs track by $index')).row(0);
first.getText().then(function (text) {
console.log(text);
});
Any help how to get it?
Thanks.
View / html Fragment
<div ng-controller="CreateRFQController as createRFQCntrl" id="CreateRFQID" class="ng-scope">
<gps-button-bar config="createRFQCntrl.buttonBarConfig" class="ng-isolate-scope"><div class="container-fluid">
<div class="row row-buttonBar">
<label><h1 class="panel-title ng-binding">RFQ Create </h1></label>
<span class="pull-right">
<span ng-repeat="aBtn in buttonBarController.config.buttonConfigs track by $index" style="padding-right: 2px" class="ng-scope">
<button class="btn btn-default btn-xs ng-binding" id=""myButton"+$index" ng-click="buttonBarController.clickHandler($index);" data-toggle="tooltip" data-placement="top" title="Create" ng-show="buttonBarController.gpsShownButtons[$index]" ng-disabled="buttonBarController.gpsDisabledButtons[$index]">
<span class="fa fa-floppy-o"></span> Create
</button>
</span><!-- end ngRepeat: aBtn in buttonBarController.config.buttonConfigs track by $index -->
</span>
</div>
You have a problem in the selector, you don't do .row on the result of element but on the by
var parent = element(by.id('CreateRFQID'));
var first = parent.element(by.repeater('aBtn in buttonBarController.config.buttonConfigs track by $index').row(0));
first.getText().then(function (text) {
console.log(text);
});
If anyone can help, I'd be very thankful. I am pretty new to AngularJS and trying to learn it. The problem I got is that one of controllers are not called when button Bought is pressed
<div class="col-md-6" ng-controller="AlreadyBoughtController as Items">
<h2>Already Bought:</h2>
<ul ng-repeat="bought in Items.ItemsBought track by $index">
<li>Bought {{bought.quantity}} {{bought.name}}</li>
</ul>
<div class="emptyMessage" ng-if="Items.ItemsBought.length === 0">Nothing bought yet.</div>
</div>.
Please look complete code with app.js file on plunker:
http://plnkr.co/edit/8wKY7PPZ6mINsFGCJQfP?p=preview
That's because you were never actually passing the index of the item you bought.
<li>Buy {{item.quantity}} {{item.name}} <button class="btn btn-default" ng-click="itemsToBuy.boughtItems($index);"><span class="glyphicon glyphicon-ok"></span> Bought</button></li>
Pass $index to your function: ng-click="itemsToBuy.boughtItems($index);
Take a look at the fixed plunk.
ng-click does not work inside ng-repeat. I have read all the guides and similar questions, but nothing work in my code. If I click on the tag inside the ng-repeat nothing happen, but if I click on my button the function is called.
html
<div ng-repeat="sykdom in sykdommer" ng-model="sykdom.name" ng-click="test();">
<a class="item item-icon-right" href="#" ng-click="test();" >
{{sykdom.name}}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
<button ng-click="test()> test </button>
JS
$scope.sykdommer = [{name:'test1'},
{name:'test2'},
{name:'test3'}];
$scope.test = function(){
alert('you clicked!');
};
I have tried with ng-click="$parent.test()" and ng-model="sykdom.name" without any luck. Please help, really stuck on this problem :(
Here is an example i've made with your data: http://plnkr.co/edit/o4sqPd
Template should be like:
<div ng-repeat="sykdom in sykdommer">
<a class="item item-icon-right" href="#" ng-click="test(sykdom.name);" >
{{sykdom.name}}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
You should use ng-model directive only in case if it's a part of you changeable data - in input/textarea etc. tags (documentation: https://docs.angularjs.org/api/ng/directive/ngModel)
I've got a button linked to a UI Bootstrap
Collapse directive if I click on it
the script show a form to reply a comment.
when the form is showed I want to hide the button
but I've got a strange behavior
this doesn't work:
<a data-ng-click="isCollapsed = !isCollapsed" data-ng-if="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
<span class="glyphicon glyphicon-share-alt"></span> Reply
</a>
this work:
<a data-ng-click="isCollapsed = !isCollapsed" data-ng-show="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
<span class="glyphicon glyphicon-share-alt"></span> Reply
</a>
and I don't really know why !
Can you enlighten me, please ?
This is expected because ng-if creates new child scope and isCollapsed property is created in it on the first click. But ng-if itself is looking at the parent scope.
Try using toggle() function declared on controller level for ng-click
$scope.toggle = function () {
$scope.isCollapsed = !$scope.isCollapsed;
};
Consider using the rule:
Treat $scope as read only in templates.