search

Home  >  Q&A  >  body text

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

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

过去多啦不再A梦过去多啦不再A梦2778 days ago707

reply all(5)I'll reply

  • 大家讲道理

    大家讲道理2017-05-15 16:57:27

    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

    reply
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-15 16:57:27

    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.

    reply
    0
  • 漂亮男人

    漂亮男人2017-05-15 16:57:27

    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

    reply
    0
  • 给我你的怀抱

    给我你的怀抱2017-05-15 16:57:27

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

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-15 16:57:27

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

    reply
    0
  • Cancelreply