如何獲得一個值，當一個元素被點擊，然後動作一個函數

我非常精通jQuery，我剛剛開始學習angularjs昨天。現在，我想要做的事情。我想要以li元素的形式說出2個標籤。我希望當我點擊某個li元素時，它會設置當前點擊一個活動類，它將從另一個li元素標籤中選擇一個不同的元素，然後刪除該li元素中的文本（在jquery中它的$（ 'li'）。text（）），然後將getJson請求動作到webservice API。我的猜測是，getJson請求將在控制器中。如何獲得一個值，當一個元素被點擊，然後動作一個函數

請這方面的幫助。我不知道如何開始以及寫什麼代碼。所以如果你能給我提供一點代碼，所以我可以看到語法，因爲我還不熟悉angularjs語法。

感謝

來源

2014-07-18 user3775998

html: 
<div ng-controller="myCtrl"> 

<div data-hbo-tabs id="tabs"> 
    <ul> 
     <li><a href="#tabs-1" ng-click="tab1()">Tab 1</a></li> 
     <li><a href="#tabs-2" ng-click="tab2()">Tab 2</a></li> 
     <li><a href="#tabs-3">Tab 3</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Content for Tab 1</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Content for Tab 2</p> 
    </div> 
    <div id="tabs-3"> 
     <p>Content for Tab 3</p> 
    </div> 
</div> 

    </div> 
js : 
var app=angular.module('myApp', []) 
.controller('myCtrl', function ($scope) { 
    $scope.tab1=function(){ 
     alert("tab 1 service call goes here"); 
    } 
    $scope.tab2=function(){ 
     alert("tab 2 service call goes here"); 
    } 
}) 
.directive('hboTabs', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, elm, attrs) { 
      var jqueryElm = $(elm[0]); 
      $(jqueryElm).tabs() 
     } 
    }; 
})

參考：

Tab sample written in this fiddle

來源

2014-07-18 07:55:41

首先定義模型。

var app = angular.module('app', []); 
app.controller('ctrl', function($scope, $http) { 
    $scope.tabs = [ 
     { title: 'Tab 1', contents:'' }, 
     { title: 'Tab 2', contents:'' }]; 


    $scope.setActive = function(tab) { 
     $http({ url: '/getTabs', method:'GET'}) 
       .success(function(data) { 
        tab.contents = data; 
       }); 
     $scope.selectedTab = tab; 
    } 
    $scope.setActive($scope.tabs[0]); 
});

下一頁綁定到您的視圖模型。

HTML

<body ng-app="app" ng-controller="ctrl"> 
    <ul> 
     <li ng-repeat="tab in tabs" ng-click="setActive(tab)" 
      ng-class="{'active': selectedTab == tab}"> {{ tab.title }} 
      <div> 
       {{ tab.contents }} 
      </div> 
     </li> 
    </ul> 
</body>

這是一個很大的代碼，但沒有太多的解釋。鑑於聲明性和可讀性，你應該能夠看到所有東西如何組合在一起。

來源

2014-07-18 08:07:53 pixelbits

如何獲得一個值，當一個元素被點擊，然後動作一個函數

回答

相關問題