Question

要求很简单。我必须启用应用按钮，只有当其中一个div被选为绿色时。请提出一些想法..已经给出了下面的运行代码片段以供参考。谢谢！

.aw-right-pane-content{height:200px; width:200px;}
.aw-dataType-selected{background:green;}

.charts{
  height:30px; width:30px;
  border:1px solid #ccc; 
  margin:20px 0 0 10px;}

<!DOCTYPE html>
    <html ng-app>
    <head>
    <script src="https://code.angularjs.org/1.4.9/angular.js"></script>
    </head>
    <body>
<div class="aw-right-pane-content" 
     ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false},   {name:'Chart2',selected:false},{name:'Chart3',selected:false},{name:'Chart4',selected:false}]">
       <div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts" >
          <div ng-click="chart.selected = !chart.selected" class="charts" ng-class="{'aw-dataType-selected':chart.selected}"></div>
          <div class="aw-right-pane-charts-name"> {{chart.name}}</div>
        </div>
<button disabled>Apply</button>
  </div>
  </body>
</html>

Answer 1

.aw-right-pane-content{height:200px; width:200px;}
.aw-dataType-selected{background:green;}

.charts{
  height:30px; width:30px;
  border:1px solid #ccc; 
  margin:20px 0 0 10px;}

<!DOCTYPE html>
    <html ng-app>
    <head>
    <script src="https://code.angularjs.org/1.4.9/angular.js"></script>
    </head>
    <body>
<div class="aw-right-pane-content" 
     ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false},   {name:'Chart2',selected:false},{name:'Chart3',selected:false},{name:'Chart4',selected:false}]">
       <div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts" >
          <div ng-click="chart.selected = !chart.selected" class="charts" ng-class="{'aw-dataType-selected':chart.selected}"></div>
          <div class="aw-right-pane-charts-name"> {{chart.name}}</div>
        </div>
<button ng-disabled="(chartsOfSelectedDatatype | filter:{ selected: true }).length == 0">Apply</button>
  </div>
  </body>
</html>

这会对你有所帮助

Answer 2

您可以执行以下操作，拥有一个跟踪所选div的属性，并在该属性上禁用ng，在示例中为selectionCount。

.aw-right-pane-content {
  height: 200px;
  width: 200px;
}
.aw-dataType-selected {
  background: green;
}
.charts {
  height: 30px;
  width: 30px;
  border: 1px solid #ccc;
  margin: 20px 0 0 10px;
}

<!DOCTYPE html>
<html ng-app>

<head>
  <script src="https://code.angularjs.org/1.4.9/angular.js"></script>
</head>

<body>
  <div class="aw-right-pane-content" ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false},   {name:'Chart2',selected:false},{name:'Chart3',selected:false},{name:'Chart4',selected:false}]">
    <div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts" ng-init="$parent.selectionCount = 0">
      <div ng-click="chart.selected = !chart.selected; $parent.selectionCount = (chart.selected == true ? $parent.selectionCount+1 : $parent.selectionCount-1)" class="charts" ng-class="{'aw-dataType-selected':chart.selected}"></div>
      <div class="aw-right-pane-charts-name">{{chart.name}}</div>
    </div>
    {{selection}}
    <button ng-disabled="selectionCount == 0">Apply</button>
  </div>
</body>

</html>

如果没有单击div，则角度禁用应用按钮

2 个答案: