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?
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>
ngDisabled?