angular.js - How to get the content in the span tag after clicking a span tag in angularjs?

Question

There are many descriptions of hobbies here. Each description is placed in a span tag. I added ng-click='getHobby()' to each span tag. How to use $scope.getHobby=function( ){} to get the description in the span tag corresponding to the click?

My method: When I bound the getHobby() function, I added the description in the tag as a parameter in the function, such as getHobby("Bookworm"). This is also possible, but it is not elegant enough. , and added a lot of code to the html, I would like to hear your solutions

Answer 1

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>

Various tags should be data controlled by the controller through the scope. Angular must always remember the existing data, and then render the interface based on the data. The operations of the interface are returned to the controller for processing through events.

If you generate the tag list on the page through other methods, such as

<span ng-click="getHobby('Bookworm')">Bookworm</span>
<span ng.....>Internet</span>

This is not the correct way to use Angular.

---

If you are just starting to use Angular, in order to prevent your original mindset from affecting your use of Angular, please keep in mind a rule that may be too absolute:

1 You must not do any DOM-related operations in the controller
2 Any DOM-related operations should be placed in the directive

Answer 2

The original poster is using jquery ideas to build angular. I wonder if angular has two-way data binding?
A suggestion to the poster: The advantage of angular is that you don’t have to operate the DOM anymore. When you are using angular but operating the DOM, think about whether there are other ways.

Answer 3

I don’t understand what the questioner is doing, the implementation of jQuery is very simple

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

17:07 Modification
The question owner can refer to the following:

<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: There are recommended books under the jQuery homepage
Refer to Jquery .on()
AngularJS Events

Answer 4

Isn’t it enough to just pass the current element to ngclick when ng loops?

Answer 5

Just write a command. .
Bind the click event in the link function of the command. .