Anglarでliタグをクリックして色を変更するコアコードを実現します。
をクリックして、borderの色を変更することができます。
htmlコード:
①要素のクリックイベントで、$scopeオブジェクトに追加された「li_」を実行します。click()「方法」
②この方法では、「$index（行番号値）」を実際の参照として方法に伝え、「focus」属性値を「$index」値に設定します。
③したがって、ある行 要素をクリックすると、「focus」属性値は対応する「$index」になります。
④このとき、 要素の「ng-class」スタイルコマンドは、key/valueオブジェクトにより、この要素が追加されるべきスタイルを指定します。 要素をクリックした場合、「$index」変数値と「focus」属性値が同じ、つまり「$index==focus」の戻り値はtrueです。
⑤このとき、「ng-class」のスタイル指令値が「focus」になることが分かります。
⑥上記の分析と操作を経て、＜li＞要素をクリックした時に、borderを追加する効果を実現しました。
cssスタイル:
以上述べたのは小编が皆さんに绍介したAnglarの中でliタグをクリックして色を変えることができます。皆さんに何かお聞きしたいことがあれば、メッセージをください。ここでも私たちのサイトを応援してくれてありがとうございます。
htmlコード:
<ul ng-if="params.questionTypeId == 8">
<li class="gamePre-def" ng-repeat=" word in wordsDef" ng-click='li_click($index)'
ng-class='{focus: $index == focus}'> {{word}}</li>
</ul>
$scope.li_click = function (i) {
$scope.focus = i;
};①
②この方法では、「$index（行番号値）」を実際の参照として方法に伝え、「focus」属性値を「$index」値に設定します。
③したがって、ある行
④このとき、
⑤このとき、「ng-class」のスタイル指令値が「focus」になることが分かります。
⑥上記の分析と操作を経て、＜li＞要素をクリックした時に、borderを追加する効果を実現しました。
cssスタイル:
ul .focus {
border: 1px solid blue;
}以上述べたのは小编が皆さんに绍介したAnglarの中でliタグをクリックして色を変えることができます。皆さんに何かお聞きしたいことがあれば、メッセージをください。ここでも私たちのサイトを応援してくれてありがとうございます。