0

Web ページのメイン ヘッダー バーと一緒にスクロールし、ユーザーが検索したスキルの履歴を表示するバーを作成したかったのです。

ユーザーがリストされたスキル (ng-mouseover) にカーソルを合わせると、強調表示され、クロス イメージが変更されます。

ユーザーのカーソルがスキルから離れると (ng-mouseleave)、ハイライトが消え、画像が変更されます。

スキル リストを html にハードコードすると機能します。

しかし、ng-repeat によってレンダリングされるモック値 (コントローラー内の変数から) を使用しようとすると、スキルはレンダリングされません。

.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>

.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}
]

この回答 (動的 ng-init 変数 - Angularjs)によると、

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

動的 ng-init 変数を作成する正しい方法の 1 つです。

しかし、私のアプリが実行されると、これらのスキルは angular によってレンダリングされません。私はクロム開発ツールでこれだけを見ます:

<!-- ngRepeat: skill in skillsList -->

ただし、コンソールにエラーはありません。何が起こっていて、どうすればそれを修復できますか?

4

1 に答える 1

0

あなたのコードはうまくいっているようですが、何か不足していたり​​競合していたり​​する可能性がありますか? コントローラーとアプリが単純なテスト変数で動作しているかどうかを確認します。

また、これがテスト用であるかどうかは理解していますが、ホバー時に画像を表示するのは css の仕事です。にホバー状態を簡単に追加でき、liパフォーマンスも向上します。

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>

于 2015-04-27T18:11:58.713 に答える