如何从json的angular中选择classname

时间:2016-08-07 21:07:00

标签: javascript jquery angularjs json

我试图通过在角度中选择类来获得元素的内部值。但由于某些原因,当我尝试选择var highlighted = angular.element(element.getElementsByClassName("btn-danger"));时,它一直给我一个错误。这是错误 angular.js:13642TypeError: angular.element.getElementsByClassName is not a function 可能是因为我将角度和jquery混合在一起

主要问题在于点击控制器。 它获取了用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);
});

我非常感谢任何帮助,因为我是棱角分明的新人。

2 个答案:

答案 0 :(得分:1)

getElementsByClassName是DOM元素的函数,而不是jQuery。

试试这个,它可能对你有帮助:

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

答案 1 :(得分:1)

Jquery中没有aSsdDsaAdfF 方法。尝试使用标准DOM查询:

getElementsByClassName