简体   繁体   中英

event.target not working for me in angular js

I m doing a angular stuff for my work. I have set of element with ng-show and im passing "custom" on each element ng-show. But its not working for me. im new to angular. Can anyone help me to fix this issue

My need is Every element has UL with hided state. when i click one element its show corresponding ul and all other element's ul has hided. If i click another one element, previous opened one ul should closed and clicked element's ul should opened.

My Code is below

app.controller('multiSelect',['$scope', function($scope){
        $scope.custom = false;
        $scope.toggleCustom = function(event) {
            $scope.custom = false;
            $(event.target).custom = true;
            console.log($scope.custom);
            console.log($(event.target).custom);

        };
}]);

My Html is

<table cellspacing="0" cellpadding="0" border="0" class="">
                    <tbody>
                        <tr>
                            <td  ng-controller="multiSelect" ng-click="toggleCustom($event)" ng-class="{active : isSelected(site)}">
                             <div class="upvalue">1</div><div class="downvalue">{{selected}}</div>
                             <ul class="reveal" ng-show="custom">
                              <li class="pointer"></li>
                              <li ng-repeat="site in sites" ><a href="javascript:void(0)" ng-click="setMaster(site)">{{site.name}}</a></li>
                             </ul>
                            </td>
                            <td></td>
                            <td  ng-controller="multiSelect" ng-click="toggleCustom($event)" ng-class="{active : isSelected(site)}">
                             <div class="upvalue">2</div><div class="downvalue">{{selected}}</div>
                             <ul class="reveal" ng-show="custom">
                              <li class="pointer"></li>
                              <li ng-repeat="site in sites" ><a href="javascript:void(0)" ng-click="setMaster(site)">{{site.name}}</a></li>
                             </ul>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td  ng-controller="multiSelect" ng-click="toggleCustom($event)" ng-class="{active : isSelected(site)}">
                             <div class="upvalue">3</div><div class="downvalue">{{selected}}</div>
                             <ul class="reveal" ng-show="custom">
                              <li class="pointer"></li>
                              <li ng-repeat="site in sites" ><a href="javascript:void(0)" ng-click="setMaster(site)">{{site.name}}</a></li>
                             </ul>
                            </td>
                        </tr>
                        </tbody>
                        </table>

You will need to add $event when calling this function. For Example

<a href="#" ng-click="toggleCustom($event)" > Toggle </a>

Set controller and event in html code

<div ng-controller = "multiSelect">
  <button ng-click = "toggleCustom(evt)" >Button</button>
</div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM