2016-08-07 9 views
0

角度のクラスを選択することで要素の内部値を取得しようとしています。しかし、それは私がvar highlighted = angular.element(element.getElementsByClassName("btn-danger"));にこれを選択しようとすると、私にエラーを与え続け、何らかの理由で、私は主な問題は、クリックコントローラである一緒にjsonから角度でクラス名を選択する方法

を角度とjQuery混合していますので、それができる angular.js:13642TypeError: angular.element.getElementsByClassName is not a function エラーです。 これは、jsonでロードされ、マウスの下に表示されるulの値を取得します(数字はテスト用です)

このプロジェクトは最終的にはインターバルので、障害者が、ここでの唯一のワンクリック

で入力することができますキーを切り替えるには、ビュー

<body ng-controller="mainController" ng-click="textArea = textArea + 1"> 


    <div ng-controller="clickController"> 

     <header> 
      <nav class="navbar navbar-default"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <a class="navbar-brand" href="#">Click and Type</a> 
       </div> 

       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li> 
       </ul> 
      </div> 
      </nav> 
     </header> 

     <div class="container"> 

      <div ng-controller="intervalController"> 

       <ul class="general_button" ng-repeat="letter in language[0].rows track by $index" ng-init="rowIndex = $index"> {{rowIndex}} 
        <button type="button" class="btn " ng-class="{true:'btn-danger', false:'btn-info'}[rowIndex ==isSelected() || columnIndex == isSelected()]" ng-repeat="single in letter track by $index" ng-init="columnIndex = $index"> 
         {{columnIndex}}{{single}} 
        </button> 
       </ul> 

       <div > 

        <h1 ng-mousemove="textArea = textArea + 1">Mouse over me!</h1> 

        <label for="inputlg">input-lg</label> 
        <input class="form-control input-lg" id="inputlg" type="text" value="{{ textArea + highlightedLetter }}"> 
       </div> 

      </div> 
     </div> 


    </div> 
    </body> 
</html> 

、ここではモデル

var App = angular.module('App', []); 
var theLanguage = 'english'; 
App.factory('jsonLanguage', function($http){ 
    var theLanguage = 'english'; 
    return { 

     get: function(theLanguage){ 
      //var url = theLanguage + '.json'; 
      var url = 'english.json'; 
      return $http.get(url); 
     } 
    } 

}); 
App.controller('mainController', function($scope, $http, $log, jsonLanguage) { 


    jsonLanguage.get().then(function(res){ 
     $scope.language = res.data; 
     $log.log($scope.language); 
    }); 

    $scope.isSelected = function(rowIndex, columnIndex) { 
     return 0; 

    } 



}); 

App.controller('intervalController', function($scope, $log) { 
    this.$log = $log; 
    //var name = $scope.single; 

    //$log.log(name); 


}); 

App.controller('clickController', function($scope, $log) { 
    $scope.$log = $log; 
    var highlighted = angular.element(angular.element.getElementsByClassName("btn-danger")); 
    alert($scope.highlightedLetter = highlighted.value); 
}); 
です

私は新しいことを大変喜んでいます。

答えて

1

のjQueryにはgetElementsByClassName方法はありません。標準のDOMのクエリを使用してみてください:

var highlighted = angular.element(document.querySelector(".btn-danger")); 
1

getElementsByClassNameは、jQueryではなくDOM要素の関数です。

は、それはあなたを助けるかもしれない、これを試してみてください:

var classElement = document.getElementsByClassName("multi-files"); 
var highlighted= angular.element(classElement); 
+0

クラスのような特別な名前を使用して変数の命名、このような状況のクラス名は、この変数がDOMCollectionが含まれているため、そのclassElementsとして命名することは非常に良いだろう非常に望ましくないで、良い練習になることはありません。 –

+0

私はあなたの提案に従って編集しました。私はちょうど彼に彼の問題を解決する方法としてアイデアを与えたかった –

関連する問題