Angularjs計數增量

Question

我想讓第二張幻燈片上的心形按鈕起作用，就像它在第一張幻燈片上工作一樣。我不確定該從哪裏出發，因爲我是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：

Answer 1

你需要的NG-初始化移動到包裝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> 

，那麼你將有機會獲得任何HTML元素反擊DIV 所以內你也可以添加一個ng-click到心臟也

歡呼聲

（或者你可以直接在包裝div上點擊ng）

Answer 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) {});