Question

我正在尝试创建一个指令来创建YES / NO切换按钮。现在我不知道我的HTML布局是否还可以，但到目前为止我做到了这一点：

<div class="toggle" toggle-button"><input type="checkbox" ng-model="confirms" /></div>
<div class="toggle" toggle-button"><input type="checkbox" ng-model="listresults" /></div>

这是应该添加到UI中的HTML，以便稍后我可以在控制器中使用该模型，我实际上有一个设置页面，其中包含很多YES / NO按钮，如本例所示。

我想要工作的方法是当指令进入按钮时，它应该显示按钮红色或绿色，具体取决于每个ng-model的值（如果确认= false，按钮应为红色，如果列表结果是的，第二个按钮应为绿色）。现在，当我按下按钮时，它应该将ng-model的值从false更改为true或反之，并且应该在toggle类附近添加或删除'on'类，以便我可以在其中进行设计。 / p>

我的完整HTML按钮应如下所示：

<div class="toggle" toggle-button>
    <input type="checkbox" ng-model="listresults" />
    <div class="toggle-inner">
        <div class="toggle-inner-yes"></div>
        <div class="toggle-inner-no"></div>
    </div>
</div>

到目前为止，我做到了这一点，我不确定我的方法是否正确，如果您有任何更好的想法，请告诉我。

myApp.directive('toggleButton', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {

            // add elem
            var html = angular.element('<div class="toggled"><div class="on"></div><div class="off"></div></div>');
            elem.append(html);

            elem.bind('click', function() {
                alert('a');
            });
        }
    }
});

现在我刚刚在按钮内添加了HTML的其余部分，并添加了一个click事件，但我不知道如何从输入到指令获取每个ng模型的值，更不用说更改ng-model来自true为false并在按钮上添加或删除'on'类。

我感谢您的任何帮助或建议。

Answer 1

您可以尝试以下操作：http://plnkr.co/edit/yRWumtd7RwLksFowBRmc?p=preview

通过属性将模型传递给指令。使用指令范围定义中的'='值对传递的属性进行双向绑定。在您的指令中使用ng-class指令切换切换按钮上的类。使用ng-click切换限制在外部控制器范围内的数据。

<强> HTML

<div ng-controller="ctrl">
  <div toggle="item" ng-repeat="item in items"></div>
</div>

<强>的JavaScript

angular.module('app',[]).
  controller('ctrl', ['$scope', function($scope) {
    $scope.items = [{
      text: 'Setting 1',
      checked: false
    }, {
      text: 'Setting 2',
      checked: false
    }, {
      text: 'Setting 3',
      checked: false
    }]
  }]).
  directive('toggle', function() {
    return {
      scope: {
        toggle: '='
      },
      template: '<div ng-click="toggle.checked=!toggle.checked" ng-class="{\'toggle\':true, \'toggle-inner-yes\':toggle.checked, \'toggle-inner-no\':!toggle.checked}">{{toggle.text}}</div>',
      replace: true
    }
  });

<强> CSS

.toggle {
  border: 1px solid silver;
  display: inline-block;
  margin: 0.5em;
  padding: 0.5em;
  color: white;
}

.toggle-inner-yes {
  background-color: green;
}

.toggle-inner-no {
  background-color: red;
}

切换按钮的指令

1 个答案: