[AngularJS]Angularjs 如果?

标签: jQuery AngularJS
发布时间: 2017/4/16 21:19:24
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想要将其转换为 jQuery...请帮助︰

$('.toggle').on('click', function() {
  $('.container').addClass('active');
});

$('.close').on('click', function() {
  $('.container').removeClass('active');
});

这里是我 index.html......:

<div class="container">
  <div class="card"></div>
  <div class="card">
    <h1 class="title">Login</h1>
    <form>
      <div class="input-container">
        <input type="text" id="Username" required="required"/>
        <label for="Username">Username</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="password" id="Password" required="required"/>
        <label for="Password">Password</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button><span>Go</span></button>
      </div>
      <div class="footer"><a href="#">Forgot your password?</a></div>
    </form>
  </div>
  <div class="card alt">
    <div class="toggle" ng-click="enabled=true"></div>
    <h1 class="title">Register
      <div class="close"></div>
    </h1>
    <form>
      <div class="input-container">
        <input type="text" id="Username" required="required"/>
        <label for="Username">Username</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="password" id="Password" required="required"/>
        <label for="Password">Password</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="password" id="Repeat Password" required="required"/>
        <label for="Repeat Password">Repeat Password</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button><span>Next</span></button>
      </div>
    </form>
  </div>
</div>

我用过 ng-class ,但似乎不能...我不明白如何将上面的 jQuery 代码转换为角。帮助将不胜感激。

解决方法 1:

这里是简单 demo 的 ng-clickng-class 的角指令︰ http://plnkr.co/edit/JJXs5BPB2e5owIYReFxO?p=preview

在您的模板的 html:

<div ng-controller="showcaseCtrl">
  <button ng-click="doStuff()">doStuff</button>
  <div class="container" ng-class="{'active': isActive}">this is container</div>
</div>

JS 中控制器

 $scope.doStuff = function(){
   $scope.isActive = !$scope.isActive;
 }

没有必要在 .toggle 上触发事件的元素的类。什么是调用 doStuff 函数在控制器中的。功能切换的价值 isActive 范围变量。 变量的变化由读取 ng-class 指令上 .content 块-如果它是真正的类 active 添加;

赞助商