Question

我有一个主html页面，其中我有一个锚标记（看起来像下面解释的按钮），下拉有一些值和一个复选框。代码如下。

我有一个锚标记，使它看起来像一个按钮，因为它有一些分配给它的CSS类。课程是：

蓝色 - ＆gt;把它变成蓝色的btn 非活动btn - ＆gt;使它成为一个不活跃的btn

课程工作正常。

我有一个复选框和
A下拉并显示一些值

所有这三个代码如下：

按钮代码（实际上是一个锚点）

<a id="submit-btn" class="inactive blue">
  <span>Submit</span>
</a>

复选框

<input ng-click="enableButton($event)" type="checkbox"/>

下拉

<select id="drop-dwn">
    <option> ....... some values
</select>

目标：我的目标是如果选中复选框并且值为

。所以目前我正在做的是我有一个控制器用于这个主要的html页面，其中有

与复选框关联的函数enableButton（$ event）。它包含用于添加和删除CSS的逻辑（目前我还没有添加用于处理下拉菜单的逻辑）。我知道这样的DOM操作不应该在控制器中完成，因此需要一个解决方案来添加这个逻辑。我已经阅读了很多教程，但仍然无法找到完成角度的完美方式。我是否需要客户指令或是否应以不同的方式完成。

控制器代码：

allControllers.controller('SubmitBtnController', 
    ['$scope', function($scope) {

    $scope.enableButton = function($event) {

        var checkbox = $event.target;

        if (checkbox.checked) {
            angular.element(document.querySelector("#submit-btn")).
                removeClass("inactive").addClass("blue");
        }
        else if (!checkbox.checked) {
            angular.element(document.querySelector("#submit-btn")).
                removeClass("blue").addClass("inactive");   
        }
    }
}]);

Controller与主应用程序绑定。

请帮忙。

Answer 1

你正在考虑的事情都是错的，你首先想到的是DOM，而你想要首先考虑范围模型，让角度根据你的范围模型来改变DOM

首先使用ng-model

将表单控件绑定到范围内的模型

<input ng-model="formControl.myInput" type="checkbox"/>
 <select ng-model="formControl.mySelect" ng-options ="..."></select>

如果范围中不存在对象formControl，则angular会自动为您创建它。您可以随意命名。

现在，元素值和范围之间存在双向数据绑定。如果在范围内设置值，它将显示在DOM中，反之亦然

现在，您可以使用ng-class作为按钮。

<a  class="somePermaClassNotDependentOnScope" 
    ng-class="{ 'inactive': !formControl.myInput, 'blue' : formControl.mySelect ==='blue'}" >
    Anchor text</a>

ng-class将评估表达式并实时更新，因为任何模型值都会发生变化。

您一定要阅读： "Thinking in AngularJS" if I have a jQuery background?

在哪里放置逻辑以手动添加和删除锚标记的类 - Angular JS

1 个答案: