Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You might consider writing a directive for this. I've created a <a href="http://plnkr.co/edit/VkZaaTgWevVeyJ3UUEgN?p=preview" rel="nofollow">demo on Plunkr</a>.</p> <p>In the demo I have created a directive called <code>level</code> with attribute <code>value</code>. HTML which renders the list of skills with their levels is very simple:</p> <pre><code>&lt;div ng-repeat="skill in skills"&gt; {{ skill.desc }}: &lt;level value="{{ skill.proficiency }}"&gt;&lt;/level&gt; &lt;/div&gt; </code></pre> <p>Note that I have simplified your <code>$scope</code> a little bit for demonstration purposes (there is just the skills array, each skill has description and proficiency).</p> <p>Here's a directive implementation:</p> <pre><code>app.directive('level', function() { return { restrict: 'E', link: function postLink(scope, element, attrs) { attrs.$observe('value', function(newValue) { // value attribute has changed, re-render var value = Number(newValue); element.children().remove(); while (value &gt; 0) { element.append('&lt;span&gt;x&lt;/span&gt;') value--; } }); } }; }); </code></pre> <p>There are several points worth pointing out in directive implementation: </p> <ul> <li>Directive watches the level attribute and re-renders the directive content every time the level attribute changes</li> <li>jQuery is optional and I don't use it here. Angular has its own lightweight jQuery implementation called <a href="http://code.angularjs.org/1.2.0rc1/docs/api/angular.element" rel="nofollow">jqLite</a>.</li> <li>I generate <code>&lt;span&gt;x&lt;/span&gt;</code> for each level point to demonstrate that I can generate HTML.</li> </ul> <p>To learn more about directives check out <a href="http://docs.angularjs.org/guide/directive" rel="nofollow">Angular's guide on directives</a>. I have also found <a href="http://www.youtube.com/watch?v=WqmeI5fZcho" rel="nofollow">Misko Hevery's talk on Directives</a> to be really useful.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload