Блог

Главная - Вопросы по программированию - как получить длину DIVs после их создания

как получить длину DIVs после их создания

#javascript #jquery #angularjs

#javascript #jquery #angularjs

Вопрос:

Я создаю $http (угловой) пост, а затем рисую там на ng-repeat некоторых разделах.

После этого мне нужно знать, сколько DIVS я только что создал, а затем выполнить некоторые DOM манипуляции JQuery .

это мой код :

 function ContactController($scope, $http,$location) {

$http.post('/Home/MakeThings', '{}').then(
function (obj) {


    $scope.questionsArr = obj.data;
    console.log($scope.questionsArr);

    var numBox = $('div[class^="boxQ"]').length;
    console.log(numBox);

    $scope.changeRoute = function (myPath) {
        console.log($scope.myPath);
        $location.path(myPath);
    }

},
function (error) {

});

}

Я не могу получить доступ

$(‘div [class^=»boxQ»]’)

потому что, я думаю, он еще не нарисован с помощью ng-repeat .

что я могу сделать, чтобы выбрать его.

Комментарии:

1. Если ваш ng-repeat отключен от questionsArr, который вы помещаете в $scope, тогда это будет просто количество элементов в нем. Просто проверьте questionsArr.length, чтобы узнать количество созданных divs. Обычно лучше попытаться ограничить операции jquery в контроллерах angular.

2. это здорово, но мне также нужно выполнить манипуляцию с DOM. например, добавление css, анимация DIVs в ng-repeat и так далее

3. Почему бы вам не создать директиву и не выполнить в них свои манипуляции с DOM. Скоро опубликую fiddle.

4. Наличие селекторов в контроллере является явным признаком того, что вы делаете это неправильно.

Ответ №1:

Я не знаю точно, что вы пытаетесь сделать, но я думаю, что директива, позволяющая выполнять любые манипуляции, которые вы хотите выполнить, — это правильный путь. В примере создается массив questionsArr в $scope . Они показаны с помощью ng-repeat и пользовательской директивы. Директива — это то, что выполняет манипуляции. Я переключаю класс boxQ по щелчку элемента.

 var mod = angular.module("myApp", []);

mod.controller("MainController", function ($scope) {
    $scope.questionsArr = [
        "What is your name?",
        "Where do you live?"
    ];
});

mod.directive("questionBox", function () {
    return {
        restrict: "A",
        transclude: true,
        template: '<div ng-transclude></div>',
        link: function (scope, elem, attrs) {
            //elem refers to the jQuery/jqLite
            //element of the directive (e.g. <div questionBox></div).

            //Just toggling class on click
            elem.on("click", function () {
                elem.toggleClass("boxQ");
            });
        }
    }
});

HTML:

 <div ng-app="myApp" ng-controller="MainController">
    <div ng-repeat="q in questionsArr">
        <div question-box>{{q}}</div>
    </div>
</div>

Скрипка здесь. Опять же, лучше ограничить любые типы манипуляций с селекторами / DOM в контроллере, поскольку для таких вещей созданы директивы.

Метки: