用AngularJS ngClick和ngClass改变类的按钮

本质上，我试图让按钮在div上设置ng-class。按钮是使用ng-repeat从阵列创建的，阵列将随着时间的推移而增长。我根据我的想法编写了this page of the AngularJS documentation的最后一个示例，该示例没有使用ng-click的函数。我是AngularJS的新手，仍然试图摆脱我的jQuery思维模式，所以让我知道这是不是最好的方法去做这件事。用AngularJS ngClick和ngClass改变类的按钮

的jsfiddle：http://jsfiddle.net/E2GB9/ - 不知道为什么它不渲染引导100％，但它不应该的问题..

当我使用的开发工具来检查ng-click后加载它看起来是正确的：ng-click="appliedStyle='example1'"但点击按钮的功能没有设置appliedStyle。

HTML：

<body ng-app> 
<div ng-controller="TypeCtrl"> 
<div class="tabbable"> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a href="#source" data-toggle="tab">Test Area</a></li> 
    </ul> 
    <div class="tab-content"> 
    <div class="tab-pane active" id="source"> 
     <div class="hero-unit" ng-class="appliedStyle"> 
     <h1>H1 Header</h1> 
     <h2>H2 Header</h2> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 
    </div> 
    </div> 
</div> 

    <ul class="unstyled"> 
     <li ng-repeat="style in styles"> 
      <span>Name: {{style.name}}</span><br> 
      <span>H1: {{style.h1}}</span><br> 
      <span>H2: {{style.h2}}</span><br> 
      <span>P: {{style.p}}</span><br> 
      <button class="btn-small" type="submit" ng-click="appliedStyle='{{style.className}}'">Apply {{style.name}}</button> 
     </li> 
    </ul> 
     The Applied Style is : {{appliedStyle}} 
</div>

JS：

function TypeCtrl($scope) { 

$scope.styles = [ 
    {name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'}]; 
}

CSS：

.example1 h1{ 
font-size: 10px; 
color: red; 
} 

.example1 h2{ 
font-size: 8px; 
} 

.example1 p{ 
font-size: 6px; 
}

来源

2013-10-15 tehaaron

顺便说一句，“应用风格是：{{appliedStyle}}'不在控制器之外。把它放到'div' –

@MaximShoustin忘了我把它留在那里，直到我读到这个，并且像“哦，哦”这样的混淆。谢谢！ – tehaaron

使用范围” $parent这句法：

ng-click="$parent.appliedStyle=style.className"

工作小提琴：http://jsfiddle.net/cherniv/E2GB9/1/

来源

2013-10-15 19:05:22 Cherniv

你能解释一下吗？ –

查看：https：//github.com/angular/angular.js/wiki/Understanding-Scopes 基本上，ng-repeat会为每个重复的项目创建一个新的范围。由于您的表达式“appliedStyle ='{{style.className}}'”（这可以是appliedStyle = style.className，btw）正在这些新范围之一中进行评估，因此它将仅分配给子范围。如果你想解决这个问题，你可以把appliedStyle放在一个对象中。 obj.appliedStyle = style.className。随着角度，你想永远有一个'。'在你的绑定中，否则你可能会遇到麻烦（就像在这种情况下）。 – Adam

@Cherniv谢谢！我真的很喜欢这个简单的东西，但是讨厌使用'$ parent'，所以我把它放在像@Adam中提到的对象中。 – tehaaron

更改您的控制器中加入这样的方法：

function TypeCtrl($scope) { 

    $scope.styles = [ 
     {name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'}]; 
    } 

    $scope.applyStyle = function(style) { 
     $scope.appliedStyle=style.className; 
    } 
}

然后简单地做到这一点在你的代码：

<button class="btn-small" type="submit" ng-click="applyStyle(style)">

长的答复是，JavaScript和一个嵌入式{{}}不是有效的表达式，因为ng-click使用的是不处理{{}}语法的$ parse服务。我只是使用函数，因为你想把你的代码放入Javascript并且不在你的模板中。保持你的代码分离。

来源

2013-10-15 19:16:10 chubbsondubs

答案解决了问题，但解释是不正确的。 Ng-click不使用隔离范围，在示例中也没有隔离范围。然而，Ng-repeat确实为每个项目创建了新的子范围，并且由于他的前一个表达式正在子范围上进行评估，因此该值将被分配到子范围，而不是您所期望的控制器范围。否则这是一个很好的解决方案。 – Adam

@chubbsondubs感谢您的回复。这实际上正是我在阅读AngularJS文档并看到没有添加新功能的示例之前所拥有的。随着事情变得更加复杂，我可能会回到这条路上。 – tehaaron

用AngularJS ngClick和ngClass改变类的按钮

回答

相关问题