如何获得一个值，当一个元素被点击，然后动作一个函数

我非常精通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

如何获得一个值，当一个元素被点击，然后动作一个函数

回答

相关问题