Angular: Disable all buttons by IDs from scope

Question

I have a scope which contain a number of IDs. I need to find all buttons with such IDs (generated via ng-repeat), disable them and replace with new text.

Typical HTML-markup:

<li ng-repeat="friend in friends">
<strong>{{friend.first_name}} {{friend.last_name}}</strong>
<button type="button" id="{{friend.uid}}-btn" class="btn btn-love" data-toggle="modal" data-target="#{{friend.uid}}-post">Send</button>
</li>

Need replace Send to Already Sent and disable the button.

How is it possible?

Have you looked into using [`ngDisabled`](http://docs.angularjs.org/api/ng.directive:ngDisabled)? — JohnnyHK, Feb 16 '14 at 17:59
Yeah, I found that. But I have no idea how to implement it with my task. — Alex, Feb 16 '14 at 18:02
Try to achieve this with databinding rather than with DOM manipulation... — Anthony Chu, Feb 16 '14 at 18:02
Don't attack the problem as you would with jQuery. See: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background — JohnnyHK, Feb 16 '14 at 18:28

score 1 · Accepted Answer · answered Feb 16 '14 at 23:23

Add a property to your $scope model that tells you if you have sent an email/message/heart. This would be in your controller:

$scope.friends.sent = false;

If you are getting friends from a RESTful source, when you perform the $http.get(), you can loop through the results before returning to the callback and add this property.

$http.get(url, config)
     .success(function(data, status, headers, config) {
         // data will contain your results
         angular.forEach(values, function(value, key) {
             // Add properties and default values needed by the controller
             this.sent = false;
         }, data);
         callback(data);
     });

I skipped handling the error case on the above example. You will need to add it to production code.

Then your HTML can become something like this:

<li ng-repeat="friend in friends">
<strong>{{friend.first_name}} {{friend.last_name}}</strong>
<button type="button" id="{{friend.uid}}-btn" class="btn btn-love" 
        data-toggle="modal" data-target="#{{friend.uid}}-post"
        ng-disabled="friend.sent"
        >{{ (friend.sent) ? "Sent" : "Send" }}</button>
</li>

Angular: Disable all buttons by IDs from scope

1 Answers1