change attributes value using jquery

Question

USing jquery how to chnage the attributes ng-click and Create to Update of the following html

<a class="btn pull-right btn-link" ng-click="create()" ng-class="{'btn-link-disabled':isSaveAndContinue,'btn-link':!isSaveAndContinue}">Create</a> $(".btn .pull-right .btn-link").attr()

The final output should be

<a class="btn pull-right btn-link" ng-click="update()" ng-class="{'btn-link- disabled':isSaveAndContinue,'btn-link':!isSaveAndContinue}">Update</a>

In jquery, $(".btn .pull-right .btn-link").attr('ng-click','update()') — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Jul 9, 2015 at 11:18

Amir Popovich · Accepted Answer · 2015-07-09 12:12:21Z

Why would you want to do something like this with JQuery?

A simple approach would be to create something like this:

$scope.handleClick = function(){ if(inUpdateMode){ update(); } else{ create(); } } $scope.getTitle = function(){ return inUpdateMode ? "update" : "create"; } <a class="btn pull-right btn-link" ng-click="handleClick()" ng-class="{'btn-link-disabled':isSaveAndContinue,'btn-link':!isSaveAndContinue}">{{getTitle()}}</a>

Another approach would be by creating a directive for this <a>.
A third approach would be using ng-if or ng-show:

<a class="btn pull-right btn-link" ng-if="!inUpdateMode" ng-click="create(param)" ng-class="{'btn-link-disabled':isSaveAndContinue,'btn-link':!isSaveAndContinue}">create</a> <a class="btn pull-right btn-link" ng-if="inUpdateMode" ng-click="update()" ng-class="{'btn-link-disabled':isSaveAndContinue,'btn-link':!isSaveAndContinue}">update</a>

I think getTitle() should be inside ng-click. Otherwise it would call immediately without needing to click
what if i have to pass a parameter to create method only in this case
@BhojendraNepal - It's ok to get called without a click since you want to update the title. This will happen on each digest call (that's the only "problem" here).
@Rajeev - This can be done by passing a param to the handleClick method and passing it only to the create method - But if update and create have different prototypes I'd go with an ng-if\ng-show approach (e.g. create both <a> elements and add the ng-if or ng-show directive to them with a condition.

Yotam Omer · Accepted Answer · 2015-07-09 11:19:55Z

0

You can try something like this:

$(".btn.pull-right.btn-link") // you don't need the spaces in the selector .attr('ng-click','update()') // change the ng-click attribube .text('Update'); // change the text inside

answered Jul 9, 2015 at 11:19

Yotam Omer

15.4k11 gold badges65 silver badges65 bronze badges

3 Comments

James Donnelly Over a year ago

Why not just use AngularJS for this?

Yotam Omer Over a year ago

@JamesDonnelly The OP clearly tagged jQuery. What the hell has angular to do with anything in this question??

James Donnelly Over a year ago

Just because a question is tagged with something, doesn't mean OP is approaching the problem in the correct way. ng-click on the a element implies that AngularJS is being used. One solution could be to use AngularJS's ng-show and ng-hide attributes which can be used to show and hide content: Rather than dynamically updating the ng-click attribute, a more logical approach would be to define two separate a elements - one which has update() and another with create(), then using ng-show and ng-hide ensure that only the relevant one is ever visible.

Muhammad Tahir · Accepted Answer · 2015-07-09 11:25:41Z

$(".btn.pull-right.btn-link").attr('ng-click', 'update()').text('Update');

here is the working example

Collectives™ on Stack Overflow

change attributes value using jquery

3 Answers 3

4 Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Related