Angularjs计数增量答案

【问题标题】：Angularjs count incrementAngularjs计数增量
【发布时间】：2016-05-23 18:15:31
【问题描述】：

我想让第二张幻灯片上的心形按钮就像在第一张幻灯片上一样。因为我是 Angularjs 的初学者，所以我不确定从哪里开始。每次有人点击心脏时，如何使按钮增加 1。如果可能的话，我想使用 Angularjs 而不是 JQuery。

<div class="socialshare">
      <div ng-app ng-class="socialshare"> <a ng-init="counter = 423" ng-click="counter = counter + 1" class="btn btn-social"><i class="fa fa-heart"></i></a> {{counter}} </div>
    </div>

这是我的Fiddle：

【问题讨论】：

标签： angularjs button click counter angularjs-ng-click

【解决方案1】：

您需要将 ng-init 移动到包装 div 上

<div class="socialshare">
    <div ng-app ng-class="socialshare" ng-init="counter = 423">
        <a ng-click="counter = counter + 1" class="btn btn-social">
        <i ng-click="counter = counter + 1" class="fa fa-heart"></i>
        </a> 
        {{counter}}
     </div>
 </div>

那么您将可以访问 div 内任何 HTML 元素上的计数器所以你也可以在心脏上添加一个 ng-click

干杯

（或者，您可以将 ng-click 放在包装 div 上）

【讨论】：

感谢@danday74 的帮助，但它仍然不起作用。在其他幻灯片上，计数器不起作用。

【解决方案2】：

这是快速工作的demo。我做了尽可能少的更改，但是随着您了解更多，您应该开始使用控制器来处理所有逻辑，而不是将所有内容都嵌入到 html 中。您绝对可以改进演示中的代码。

您需要将 ng-app 属性移动到容器级别并在幻灯片级别定义 ng-controller 以便它可以拥有自己的范围。

    <div class="container"  ng-app="myApp">
        <div class="nav"> 
            <span class="left fa fa-chevron-left fa-3x"></span>
            <span class="right fa fa-chevron-right fa-3x"></span>
        </div>
    <div class="slides" ng-controller="myCtrl">
      <div class="left-content">
         <blockquote></blockquote>
          <img src="http://s9.postimg.org/if00ntv27/sheldon_1.png"  alt="Sheldon"> 
       </div>
     <div class="right-content">
      <div class="socialshare">
        <div ng-app ng-class="socialshare"> <a ng-init="counter = 423" ng-click="counter = counter + 1" class="btn btn-social"><i class="fa fa-heart"></i></a> {{counter}} </div>
      </div>
      <div class="quote-content">
        <div class="quote">
          <p>Don’t you think that if I were wrong, I’d know it?</p>
        </div>
        <div class="author">- Sheldon Cooper</div>
      </div>
    </div>
  </div>
  <div class="slides" ng-controller="myCtrl">
    <div class="left-content">
      <blockquote></blockquote>
      <img src="http://s9.postimg.org/w2ao9sein/samberg_1.png" alt="Sheldon"> </div>
    <div class="right-content">
      <div class="socialshare">
        <div ng-app ng-class="socialshare"> <a ng-init="counter = 423" ng-click="counter = counter + 1" class="btn btn-social"><i class="fa fa-heart"></i></a> {{counter}} </div>
      </div>
      <div class="quote-content">
        <div class="quote">
          <p>I'm a story teller, Sir. It's my craft!</p>
        </div>
        <div class="author">- Detective Jake Perralta - aka Lone Wolf</div>
      </div>
    </div>
  </div>
</div>

然后添加以下脚本。

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {});

【讨论】：

成功了！谢谢！！我绝对想了解更多关于 Angularjs 的知识！
@user3451161：不客气。如果对您有帮助，请将其标记为答案。