I'm trying to remove an element inside ngRepeat. It's removing well, but after the element is removed, the page is reloaded. How can I prevent this reload action?
Heres the code:
<li ng-repeat="task in tasks">
<p>{{task.title}}</p>
<button ng-click="remove($index)">Click me</button>
</li>
js scope:
$scope.remove = function($index){
$scope.tasks.splice($index, 1);
}
As per the W3C spec, the type is undefined and it's assuming a submit. Adding type='button' should resolve the issue for you.
<li ng-repeat="task in tasks">
<p>{{task.title}}</p>
<button type="button" ng-click="remove($index)">Click me</button>
</li>
Relevant specification if you're curious.
<button> was acting like a submit (thanks to #Antiga), I tried to change it to input[type=button] but still didn't work.
I just made this change:
<button ng-click="remove($index)">Click me</button>
to:
<a ng-click="remove($index)">Click me</a>
And it worked well.
Related
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.
My Code is given below . Please check and reply .
Thanks
<div ng-repeat="(x, y) in items">
<a class="btn tooltipped" data-position="bottom" data-delay="50" data- tooltip="I am tooltip">Hover me!</a>
</div>
I tested your code and everything works fine when I removed the spaces in data-tooltip attribute.
<a class="btn tooltipped" data-position="bottom" data-delay="50" data- tooltip="I am tooltip">Hover me!</a>
----------------------------------------------------------------------^^^^
Did you initialize the tooltip before your content has been loaded? If so, you should initialize it after the render of items data. Otherwise there will be no .tooltiped DOM to be initialized.
I am new to ui-router.
I am trying to navigate to models state. When I take the first apporach with button it works fine but it fails when I do the same with img tag.
//it works:
<a ui-sref="models">
<button class="btn btn-primary">goto models state</button>
</a>
//below code does not work:
<a ui-serf="models">
<img src="/content/images/_genericDevice.png" />
</a>
Can anybody explain why is this so ?
Not sure if this is intentional, but you have a typo:
<a ui-serf="models">
ui-serf should be ui-sref
Trying to do something like this
angular.element('.header').addClass('original').clone().insertAfter('.header').addClass('cloned').css('position', 'fixed').css('top', '0').css('margin-top', '0').css('z-index', '500').css('padding-top', '15px').css('padding-bottom', '16px').removeClass('original').hide();
angular.element('.cloned').show();
angular.element('.original').css('visibility', 'hidden');
angular.element('.original').addClass('orginal-header');
And it creates a clone of my header for a sticky header solution, but then I notice the directives I have on a link in the header i.e. a help link which opens/closes a popup menu no longer works.
I.e In my header I have this
<div class="dropdown pull-right" dropdown on-toggle="toggled(open)">
<a class="btn btn-default btn-menu dropdown-toggle" href dropdown-toggle> Help? </a>
<ul class="dropdown-menu">
<li><a ui-sref="help">Get Help?</a></li>
<li><a href open-support-modal>Report an Issue</a></li>
</ul>
</div>
I have a click event on dropdown-toggle which no longer triggers on the copied header.
Any ideas ?
Since you are modifying the DOM, you have to inform angular that it needs to take a second look at things. That's what the $compile service is for. Add this code after your cloning code:
var element = angular.element(".cloned");
$compile(element.contents())(scope);
We've got the following HTML:
<div class="btn-group search-dropdown" dropdown is-open="gender.isopen">
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
{{sex_temp=='F'?'Female':'Male'}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-class="{'dropdown-selected':sex_temp=='F'}">
<a ng-click="sex_temp='F'">Female</a>
</li>
<li ng-class="{'dropdown-selected':sex_temp=='M'}">
<a ng-click="sex_temp='M'">Male</a>
</li>
</ul>
</div>
In the console, we're getting the following error:
Error: setIsOpen is not a function #http://127.0.0.1/lib/bootstrap-ui/ui-bootstrap-tpls-0.12.1.js:1734:5
$RootScopeProvider/this.$get</Scope.prototype.$digest#http://127.0.0.1/lib/AngularJS/angular.js:12406:23
$RootScopeProvider/this.$get</Scope.prototype.$apply#http://127.0.0.1/lib/AngularJS/angular.js:12679:13
done#http://127.0.0.1/lib/AngularJS/angular.js:8279:34
completeRequest#http://127.0.0.1/lib/AngularJS/angular.js:8484:7
createHttpBackend/</xhr.onreadystatechange#http://127.0.0.1/lib/AngularJS/angular.js:8423:1 #debugger eval code:1:1
consoleLog/<#http://127.0.0.1/lib/AngularJS/angular.js:10062:18
$ExceptionHandlerProvider/this.$get</<#http://127.0.0.1/lib/AngularJS/angular.js:7363:7
$RootScopeProvider/this.$get</Scope.prototype.$digest#http://127.0.0.1/lib/AngularJS/angular.js:12426:19
$RootScopeProvider/this.$get</Scope.prototype.$apply#http://127.0.0.1/lib/AngularJS/angular.js:12679:13
done#http://127.0.0.1/lib/AngularJS/angular.js:8279:34
completeRequest#http://127.0.0.1/lib/AngularJS/angular.js:8484:7
createHttpBackend/</xhr.onreadystatechange#http://127.0.0.1/lib/AngularJS/angular.js:8423:1
We're using ui-bootstrap-tpls-0.12.1.js
I have tried adding $scope.gender={isopen:false} but that didn't help.
Any idea on what might be the problem here? The dropdown is working perfectly. I just want to get rid of these errors in the console.
I had the same issue, I believe it has something to do with the overlap of bootstrap's drop-down. Try removing the "dropdown-toggle" class from your button.
In my case it helped to simply remove the is-open attribute.
This is 2 years later, but updating your ui-bootstrap would fix this problem if you're using an older version (example 0.13 instead of 2.5)