mardi 23 décembre 2014

Angular JS / Effecting CSS properties without using a class


So I'm converting an application from a Polymer/Angular hybrid to Angular and have come across an issue that I'm not entirely sure how to solve.


In my original custom element I had the following HTML:



<div class="btn-group btn-group-xs tag">
<button type="button" class="btn btn-default tag-upvote" on-click="{{upvote}}"></button>
<button type="button" class="btn btn-default tag-link" id="tag" data-upvotes="0" data-votes="0">{{tagname}}</button>
<button type="button" class="btn btn-default tag-downvote" on-click="{{downvote}}"></button>
</div>


Which called a Polymer script:



<script>
Polymer('tag-tag', {
ready: function() {},

upvote: function() {
var upvotes = parseInt(this.$.tag.getAttribute("data-upvotes"), 10) + 1;
var votes = parseInt(this.$.tag.getAttribute("data-votes"), 10) + 1;

var percent = Math.round((upvotes / votes) * 100);

this.$.tag.style.backgroundSize = percent + "%, 100%, 100%, 100%";

this.$.tag.setAttribute('data-upvotes', upvotes);
this.$.tag.setAttribute('data-votes', votes);
},

downvote: function() {
var upvotes = parseInt(this.$.tag.getAttribute("data-upvotes"), 10) + 0;
var votes = parseInt(this.$.tag.getAttribute("data-votes"), 10) + 1;

var percent = Math.round((upvotes / votes) * 100);

this.$.tag.style.backgroundSize = percent + "%, 100%, 100%, 100%";

this.$.tag.setAttribute('data-upvotes', upvotes);
this.$.tag.setAttribute('data-votes', votes);
}
});
</script>


Essentially the upvote to total vote ratio was calculated and used as a percentage which dictated the percentage background size for a colored image. Now I am trying to do the same thing using only Angular and have the following so far:



<div class="btn-group btn-group-xs tag">
<button type="button" class="btn btn-default tag-upvote" ng-click="category[1].upvotes = category[1].upvotes + 1"></button>
<button type="button" id="tag" class="btn btn-default tag-link" data-upvotes="{{category[1].upvotes}}" data-downvotes="{{category[1].downvotes}}" ng-style="[[{'background-size: ({{category[1].upvotes}} / ({{category[1].downvotes}} + {{category[1].upvotes}})%, 100%, 100%, 100%;'}]]"><a href="#/search?{{category[0]}}" id="tagLink">{{category[0]}}</a></button>
<button type="button" class="btn btn-default tag-downvote" ng-click="category[1].downvotes = category[1].downvotes + 1"></button>
</div>


I know the ng-style isn't with the correct syntax, but this is within an ng-repeat function so I'm not sure how to have an individual class dictate the percentages individually (there are 30 or so of these "tags" per page).


Any help whatsoever would be greatly appreciated! Thanks so much!





Aucun commentaire:

Enregistrer un commentaire