Question

是否可以访问具有特定类的按钮中的子元素？将创建多个按钮。单击提交按钮时，我想迭代创建的'btnSelection'按钮列表，如果'btnSelection'按钮具有'active'类，我想将span数据推送到数组中。

我想我需要将一个参数放入一个对象中，该对象本身将成为进入ng-click的submit方法的参数，但我不确定如何编写Angular部分。搜索Google不会产生任何具体示例。我很感激任何帮助。

示例HTML：

<div ng-repeat="item in items">
    <button id="btnSelection" class="active">
        <span>{{item.value}}</span>
    </button>
</div>
<button ng-click="submit()">Submit</button>

Answer 1

你不应该在你的控制器中使用活动课程，它不是有角度的方式。而是在项目对象中使用活动属性，然后设置活动类。

这是一个jsFiddle：

http://jsfiddle.net/L5z3j0gj/2/

<强> HTML：

<div ng-app='myApp' ng-controller='myController'>
    <div ng-repeat="item in items">
        <button type='button' 
                ng-click='addContent($index)'
                ng-class="{active: item.active}"
                ng-disabled='!item.active'>
            <span>{{item.value}}</span>
        </button>
    </div>
    <button type='button' ng-click='addContents(items)'>Submit</button>
    {{contentsArray}}
</div>

<强>控制器：

angular.module('myApp', [])
.controller('myController', function($scope) {
    $scope.items = [
        { value: 'value1', active: true },
        { value: 'value2', active: false },
        { value: 'value3', active: true }
    ];
    $scope.contentArray = [];

    $scope.addContent = function(index) {
        console.log($scope.items[index]);
        $scope.contentArray.push($scope.items[index].value);
    };

    $scope.addContents = function(items) {
        $scope.contentsArray = [];
        for (var idx in items) {
            var item = items[idx];
            if (item.active) {
                $scope.contentsArray.push(item.value);
            }
        }
    };
});

<强> CSS：

.active {
    background: green;
}

Answer 2

演示：http://jsfiddle.net/bjbrc5wy/3/

  <div ng-controller="ItemCtrl">
    <ul>
      <li ng-repeat="item in items">
        <button ng-click="toggleActive(item)" class="active-{{item.active}}">
          {{item.val}}
        </button>
      </li>
    </ul>
    <br>
    <button ng-click="submit()">Submit</button>
  </div>

您需要使用一个充当父对象的控制器，一个儿童容器。然后，当您从此控制器中按下提交按钮时，您可以从同一控制器$ scope访问其他项目。您可以看到我还使用class="active-{{btn.active}}"将数据绑定到CSS，因此它会根据其活动状态自动更新。控制器的定义如下：

function ItemCtrl($scope) {
  $scope.items = [ // sample data
    {val:1, active:true},
    {val:2, active:false}];

  $scope.submit = function() {
    var arr = [];
    angular.forEach($scope.items, function(item) {
      if(item.active) arr.push(item.val);
    });
    alert(arr); // here's the array of item values
  };
}

单击按钮，查找具有特定类的元素，并访问元素内的范围数据

2 个答案: