Как манипулировать элементами внутри ng-if без использования директивы

0

У меня возникли проблемы с выполнением предложений манипулирования DOM для элементов внутри ng-if.

Я думаю, проблема здесь в том, что DOM не готов при запуске кода манипуляции.

Есть ли способ сделать это без директивы?

Пример (два выбирают один внутри ng-if handle с помощью флажка):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Select2 Test</title>
    <link rel="stylesheet" type="text/css" href="./bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="./bower_components/select2/dist/css/select2.css">
</head>
<body ng-app="Myapp">
    <div class="container" ng-controller="Select2Controller">
        <div class="row">
            <div class="col-sm-12">
                <select id="myselect" style="width:200px;">
                    <option value="1">option1</option>
                    <option value="2">option2</option>
                    <option value="3">option3</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <input type="checkbox" name="toogle" ng-model="checked">Show ng-if nested select</input>
                <div ng-if="checked">
                    <select id="myselect2" style="width:200px;">
                    <option value="4">option4</option>
                    <option value="5">option5</option>
                    <option value="6">option6</option>
                </select>
                </div>
            </div>
        </div>
    </div>
    <script src="./bower_components/jquery/dist/jquery.js" ></script>
    <script src="./bower_components/bootstrap/dist/js/bootstrap.js" ></script>
    <script src="./bower_components/angular/angular.js" ></script>
    <script src="./select.ctrl.js" type="text/javascript"></script>
    <script src="./app.js" type="text/javascript"></script>
</body>
</html>

контроллер:

var app = angular.module("Myapp", []);

app.controller("Select2Controller", function($scope) {

    $scope.checked = false;   

   $( document ).ready(function() {
        //This code works 
        $("#myselect").append("<option value='4'>new option</option>");
    });

    $scope.$watch('checked', function (newVal, oldVal) {
        if (newVal && $scope.checked) {
            $(document).ready(function () {
                //Not works
                $("#myselect2").append("<option value='7'>new option</option>");
            });  
        }
    });

});

Первый выбор ведет себя хорошо, но второй выбор остается равным, в этом случае не добавляется опция.

Я пробовал другие предложения и делал ту же историю. ng-show работает из-за его природы (скрытые элементы там можно манипулировать), но это не соответствует моим потребностям.

Я ищу общий ответ, добавление и вариант - просто пример. Предложение может быть любым, что манипулирует вложенными элементами ng-if.

Любая идея или решение? благодаря

  • 0
    @ieaglle Я не спрашиваю о дизайне, а код только для тестирования / показа проблемы. Функция setTimeout тоже пахнет плохим дизайном. Спасибо за ваш ответ и советы.
  • 0
    Какой именно вопрос? Я дал вам 3 ответа, и все они делают именно то, что вы хотите достичь, но ни один из них не является «правильным ответом». Я бы сделал весь выбор либо с помощью docs.angularjs.org/api/ng/directive/select, либо с docs.angularjs.org/api/ng/directive/ngRepeat . Я даже не понимаю, почему вы хотите добавить опцию для выбора, который даже не виден. Почему «новая опция» уже не может быть в выборе, поскольку весь выбор не виден? Я бы понял, если у вас есть флажок для переключения выбора видимости и другой флажок / выберите, который добавляет / удаляет параметры.
Показать ещё 1 комментарий
Теги:

4 ответа

2

Почему бы вам не использовать ng-if для опции? Подобно:

<div ng-if="checked">
    <select id="myselect2" style="width:200px;">
        <option value="4">option4</option>
        <option value="5">option5</option>
        <option value="6">option6</option>
        <option ng-if="something" value="7">option7</option>
    </select>
</div>
Поделиться
  • 0
    Я ищу общий ответ, добавить и вариант просто пример.
  • 1
    Этот ответ поднимает очень хороший вопрос. Если вы делаете вещи угловатым образом - зачем смешивать это с JS / jQuery, особенно на уровне контроллера приложений? Вообще говоря, гораздо лучше полагаться и работать под прямым углом, чем просто использовать некоторые части, отчасти причина этого заключается в том, что вы столкнулись с кодом, размещенным здесь.
Показать ещё 1 комментарий
0

Вы пытались изменить это:

$scope.$watch('checked', function (newVal, oldVal) {
    if (newVal && $scope.checked) {
        $(document).ready(function () {
            //Not works
            $("#myselect2").append("<option value='7'>new option</option>");
        });  
    }
});

В этом:

$scope.$watch('checked', function (newVal, oldVal) {
    if (newVal && $scope.checked) {
        $timeout(function(){
            $("#myselect2").append("<option value='7'>new option</option>");
        });  
    }
});

Более подробную информацию о $timeout можно найти в: https://docs.angularjs.org/api/ng/service/ $ timeout

Поделиться
  • 0
    Да, это решает проблему, но это то же самое, что сказать «подождать достаточно времени, чтобы DOM был готов», не говоря, когда элементы готовы -> запустить код.
0

Я предполагаю, что "без директивы" вы имеете в виду без специальной директивы.

Вы можете привязать параметры выбора к массиву в области видимости с помощью директивы ngOptions:

HTML:

<select id="myselect2" ng-model="selectedOption" ng-options="option for option in options"></select>

контроллер:

app.controller("Select2Controller", function($scope) {

  $scope.checked = false;
  $scope.options = ['option1', 'option2'];

  $scope.$watch('checked', function (newVal, oldVal) {
    if (newVal) {
      $scope.options.push('option3');  
    } else {
      $scope.options.pop();
    }
  });
});
Поделиться
0

Используйте ng-repeat:

контроллер:

$scope.select = [
    {value: 4, label: 'option 4'},
    {value: 5, label: 'option 5'},
    {value: 6, label: 'option 6'},
];

Посмотреть:

<div ng-if="checked">
    <select ng-model="select">
        <option value="option.value" ng-repeat="option in select">{{ option.label }}</option>
    </select>
</div>

Затем ваш выбор будет динамическим. Позже, когда вы хотите добавить дополнительные параметры, просто используйте $scope.select.push({value: 7, label: 'option 7'}); и т.д

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню