Ng-repeat not rendering html with dynamically created variables inside ng-init directive

Question

I wanted to make bar that scroll with webpage's main header bar and shows history of skills user searched for.

When user hovers over listed skill (ng-mouseover), it should be highlighted and cross image should be changed.

When user's cursor leaves the skill (ng-mouseleave), the highlight should disappear and image should be changed.

It works when I hardcode the skills list into html.

But when I try to use mocked values (from variable which is in controller), which are rendered by ng-repeat, the skills aren't get even rendered.

Snippet of .html:

<div class="listed-skills">
  <ul>
    <li ng-repeat="skill in skillsList" ng-init="this['crossIcon' + skill.num] = false" ng-mouseover="this['crossIcon' + skill.num] = true" ng-mouseleave="this['crossIcon' + skill.num] = false">
      <span class="history-skill-name">{{skill.name}}</span>
      <img src="/images/header-skillbar-cross-dark.svg" alt="Delete skill from search history" ng-if="this['crossIcon' + skill.num] == true" />
      <img src="/images/header-skillbar-cross-light.svg" alt="Delete skill from search history" ng-if="this['crossIcon' + skill.num] == false" />
      <span class="skill-list-separator">|</span>
    </li>
  </ul>
</div>

And scope variable inside .coffee:

$scope.skillsList = [
  {name: "Piano", num: 1},
  {name: "Hiking", num: 2},
  {name: "Cycling", num: 3},
  {name: "Football", num: 4},
  {name: "Computer programming", num: 5},
  {name: "Kung-Fu", num: 6}
]

According to this answer (Dynamic ng-init variable - Angularjs),

ng-init="this['Foo' + foo.Bar] = blah"

is one of correct ways to create dynamic ng-init variables.

But when my app's getting run, those skills aren't rendered by angular. I see in chrome dev tools only this:

No error in console, though. What's happening and how I can repair that?

This looks correct - have you tried ng-debounce ?

Codeman
– Codeman

2015-04-27 18:13:18 +00:00
Commented Apr 27, 2015 at 18:13 — Codeman
– Codeman, Commented Apr 27, 2015 at 18:13

Austin Greco · Accepted Answer · 2015-04-27 18:11:58Z

Your code seems to work, maybe there is something missing or conflicting? Check to see if your controller and app are working with a simple test variable.

Also, I understand if this is just for testing, but showing images on hover really is a job for css. You could esaily add a hover state to the li's and it would perform better as well.

angular.module('test',[])
.controller('test', function($scope) {
$scope.skillsList = [
  {name: "Piano", num: 1},
  {name: "Hiking", num: 2},
  {name: "Cycling", num: 3},
  {name: "Football", num: 4},
  {name: "Computer programming", num: 5},
  {name: "Kung-Fu", num: 6}
];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="test">
<div class="listed-skills">
  <ul>
    <li ng-repeat="skill in skillsList" ng-init="this['crossIcon' + skill.num] = false" ng-mouseover="this['crossIcon' + skill.num] = true" ng-mouseleave="this['crossIcon' + skill.num] = false">
      <span class="history-skill-name">{{skill.name}}</span>
      <img src="/images/header-skillbar-cross-dark.svg" alt="Delete skill from search history" ng-if="this['crossIcon' + skill.num] == true" />
      <img src="/images/header-skillbar-cross-light.svg" alt="Delete skill from search history" ng-if="this['crossIcon' + skill.num] == false" />
      <span class="skill-list-separator">|</span>
    </li>
  </ul>
</div>
  </div>

Collectives™ on Stack Overflow

Ng-repeat not rendering html with dynamically created variables inside ng-init directive

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related