在所选元素的父元素上添加“ng-class”

Add "ng-class" on parent of selected element's

本文关键字：元素 添加 ng-class      更新时间：2023-09-26

所以与ng-class相关的另一个问题是。

单击<ul>中存在的类<button> <li>

演示

.html：

<div ng-app="myApp">
<section ng-controller="myCtrl">
    <ul>
        <li ng-repeat="item in model.items" class="commonClass">{{ item.name }}</li>
        <li><button>
        active
        </button></li>
    </ul>
    <ul>
        <li ng-repeat="item in model.items" class="commonClass">{{ item.name }}</li>
        <li><button>
        active
        </button></li>
    </ul>
</section>
</div>

.JS：

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.model = {
        selected: null,
        items : [
            {name: "Apple"}, 
            {name: "Banana"}, 
            {name: "California"}
         ]
    };
})

试试这个

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.uls = [{model: { selected: null, items: [{ name: "Apple" }, { name: "Banana" }, { name: "California" }] }}, {model:{ selected: null, items: [{ name: "Apple" }, { name: "Banana" }, { name: "California" }] }}];
  /* $scope.model = {
    selected: null,
    items: [{
      name: "Apple"
    }, {
      name: "Banana"
    }, {
      name: "California"
    }]
  }; */
})
.on {
  color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <section ng-controller="myCtrl">
    <ul ng-class="{'on': ul.onIsOn}" ng-repeat="ul in uls">
      <li ng-repeat="item in ul.model.items" class="commonClass">{{ item.name }}</li>
      <li>
        <button ng-click="ul.onIsOn = !ul.onIsOn">
          active
        </button>
      </li>
    </ul>
  </section>
</div>

相关文章：