ng-click得到當前元素
阿新 • • 發佈:2019-02-14
場景:給多個按鈕繫結事件,並得到點選物件。
在最上面的元素加上點選事件,然後利用$event.target得到點選物件
看程式碼
<ul class="result-choose" id="ResultChoose" ng-click="changeStatus($event);">
<li id="Success">
<!--<span ng-class="{true: 'checked'}[isActive]">撥打成功</span>-->
<span ng-class='{checked:tar=="撥打成功"}'>撥打成功</span>
</li>
<li>
<span ng-class='{checked:tar=="佔線"}'>佔線</span>
</li>
<li>
<span ng-class='{checked:tar=="拒接"}'>拒接</span>
</li>
<li>
<span ng-class='{checked:tar=="號碼廢棄"}'>號碼廢棄</span>
</li>
<li>
<span ng-class ='{checked:tar=="無人接聽"}'>無人接聽</span>
</li>
<li>
<span ng-class='{checked:tar=="停機"}'>停機</span>
</li>
<li>
<span ng-class='{checked:tar=="關機"}'>關機</span>
</li>
<li>
<span ng-class='{checked:tar=="號碼錯誤"}'>號碼錯誤</span>
</li>
</ul>
$scope.changeStatus=function($event){
var test=$event.target.childNodes[0].nodeValue;
$scope.tar=test;
if(test!="撥打成功"){
$scope.isActive=true;
}else{
$scope.isActive=false;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="lib/jquery/jquery-1.10.2.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
</head>
<body ng-app>
<div ng-controller="TestCtrl">
<a href data="1" ng-click="GoPage($event.target)">1</a>
<a href data="2" ng-click="GoPage($event.target)">2</a>
<a href data="3" ng-click="GoPage($event.target)">3</a>
<a href data="4" ng-click="GoPage($event.target)">4</a>
<a href data="5" ng-click="GoPage($event.target)">5</a>
{{ page }}
</div>
<script>
function TestCtrl($scope) {
$scope.page = 1;
$scope.getData = function () {
console.log($scope.page);
}
$scope.GoPage = function (target) {
$scope.page = target.getAttribute('data');
this.getData();
}
}
</script>
</body>
</html>
話題2:angular.element()用法
在Control中,angular.element()返回一個jquery物件,如angular.element(document).ready(function(){});
所以你可以對她做你對所有jquery物件可以做的事
返回指定元素的scope:var sidebar = document.getElementsById(‘sidebar’); var scope = angular.element(sidebar).scope();