angular.js - angularjs中如何實作點選一個span標籤之後,拿到span標籤中的內容?
过去多啦不再A梦
过去多啦不再A梦 2017-05-15 16:55:27
0
5
712

這裡有很多愛好的描述,每個描述都是放在一個span標籤裡面,我給每個span標籤都添加了ng-click='getHobby()',如何在$scope.getHobby=function(){ }中拿到點擊時對應的span標籤內的描述?

我的方法:我嘗試了在綁定getHobby()函數的時候,就在函數裡面添加標籤內的描述為參數, 比如這樣getHobby("書蟲"),這樣也是可以的,但是不夠優雅,並且在html又增加了許多程式碼,想聽聽各位的解決方案

过去多啦不再A梦
过去多啦不再A梦

全部回覆(5)
大家讲道理
app.controller('TagCtrl',function($scope){
   $scope.tags=[{name:'书虫',code:'xx'},{name:'互联网',code:'yy'}];
   $scope.onSelect=function(tag){
     $scope.selectedTag=tag;
     console.log(tag.name)//tag.code......
   }
});

<ul ng-controller='TagCtrl'>
    <li ng-repeat="tag in tags">
        <span ng-click="onSelect(tag)">{{tag.name}}</span>
    </li>
</ul>

各種標籤應該是由controller透過scope控制的數據,angular裡面要時時記住現有數據,後面根據數據渲染介面,介面的操作透過event返回到controller處理。

如果你是透過其他方法在頁面產生tag列表,例如

書蟲
網路

這絕壁不是angular的正確使用姿勢。


剛開始用angular的為了防止原有思維定勢影響angular使用,請牢記一條可能太過絕對的守則:

1 絕對不能在controller做任何跟dom有關的操作
2 任何跟dom相關的操作都應該放到directive裡面

曾经蜡笔没有小新

樓主在用jquery的思想做angular,不知道angular有雙向資料綁定嗎?
給樓主建議:angular的好處就是可以讓你不用再操作dom,當你在用angular卻在操作DOM時,想一想是不是有其他的方式。

漂亮男人

不懂題主的做法,jQuery的實作方式很簡單

// 绑定 p 下面所有span标签的click事件
$("p span").on('click', function(){
  // 获得span的text
  var text = $(this).text();
});  

17:07 修改
題主可以參考下:

<p ng-controller="MyController" >
    <p ng-click="myData.doClick()">Click here</p>
</p>

<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myData = {};
                $scope.myData.doClick = function() {
                    alert("clicked");
                }
            } );
</script>

PS:jQuery主頁下面有推薦書籍
參考Jquery .on()
AngularJS Events

给我你的怀抱

ng循環時給ngclick傳個當前元素不就行了。

伊谢尔伦

寫個指令就行。 。
在指令的link函數中綁定點擊事件好了。 。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板