如何在不使用指令的情况下操作ng-if内部的元素

How to manipulate elements inside ng-if without using a directive

本文关键字：情况下 操作 内部 元素 ng-if 指令      更新时间：2023-09-26

我在为ng-if中的元素执行DOM操作语句时遇到问题。

我认为这里的问题是DOM在操作代码运行时还没有准备好。

有没有办法在没有指令的情况下做到这一点？

示例（如果通过复选框处理，两个在ng内选择一个）：

<!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展示作品是因为它的本质（隐藏的元素是可以操纵的），但它不符合我的需求。

我正在寻找一个一般的答案，add和option只是一个例子。这个句子可以是任何操纵嵌套ng-if元素的东西。

有什么想法或解决方案吗？感谢

为什么不使用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>

使用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'});等

你试过改变这个吗：

$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

我假设"没有指令"是指没有自定义指令。

您可以使用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();
    }
  });
});
相关文章：