2016-07-27 20 views
0

をクリックするとng-clickが機能しません。スコープの値を変更してonclick関数をトリガーする必要があります。Angular JS

しかし、このコードでは、list要素のlabelを追加したときにng-clickが動作していません。

コードは、それが正常に動作する必要があり、以下の

<ul class="" id="filter" path="filter"> 
<li value="popular" id="popular" data-faculty="Popular" class="item" onclick="SortByFilter(this, 'smartphone');" ng-click="Mobilebidirectionalsort = !Mobilebidirectionalsort"><label for="Popular">Popular</label><span class="btnSort"><input type="radio" id="Popular" name="filterOptions" class="btnRadio"></span></li> 

<li value="newest" id="newest" data-faculty="High Rating" class="item" onclick="SortByFilter(this, 'smartphone');" ng-click="Mobilebidirectionalsort = !Mobilebidirectionalsort"><label for="High Rating">High Rating</label><span class="btnSort"><input type="radio" id="High Rating" name="filterOptions" class="btnRadio"></span></li> 

</ul> 
+2

Mobilebidirectionalsortの方法ng-click変更された値を見ることができますか?角形アプリケーションでのみクリックする必要があります。 – vanhonit

+0

あなたのリストにアンカータグを使用してみてください –

+0

onclickとng-clickは、リストタグにラベルタグを追加することなく正常に動作しています。その他の具体的な理由は? – CodeMan

答えて

0

です。私はあなたが上で説明しましたような状況のミラーを作成しました、あなたは明確に、なぜあなたのコード内のonclickを持って

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="myCtrl"> 
 
    <div class="col-sm-7 nopadding doc-att"> 
 
     Mobilebidirectionalsort value : {{Mobilebidirectionalsort}} 
 
     <ul class="" id="filter" path="filter"> 
 
      <li value="popular" id="popular" data-faculty="Popular" class="item" onclick="SortByFilter(this, 'smartphone');" ng-click="Mobilebidirectionalsort = !Mobilebidirectionalsort"> 
 
       <label for="Popular">Popular</label><span class="btnSort"><input type="radio" id="Popular" name="filterOptions" class="btnRadio"></span> 
 
      </li> 
 
      <li value="newest" id="newest" data-faculty="High Rating" class="item" onclick="SortByFilter(this, 'smartphone');" ng-click="Mobilebidirectionalsort = !Mobilebidirectionalsort"> 
 
       <label for="High Rating">High Rating</label><span class="btnSort"><input type="radio" id="High Rating" name="filterOptions" class="btnRadio"></span> 
 
      </li> 
 
     </ul> 
 

 
     <script> 
 
      var myApp = angular.module("myApp", []); 
 

 
      myApp.controller("myCtrl", ['$scope', function($scope) { 
 
       $scope.Mobilebidirectionalsort = true; 
 

 
      }]); 
 

 

 
      function SortByFilter(attr1, attr2) { 
 
       console.log('SortByFilter called'); 
 
      } 
 
     </script> 
 
</body> 
 

 
</html>

+0

:同じコードを外に出さないでください。 – CodeMan

+0

@CodeManそれはまさにあなたと同じコードです。私は何も調整していない。何か問題があれば、それはあなたのコントローラーにあります。完全なコードを投稿する必要があります。 –