Question

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

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

有一种方法可以在没有指令的情况下做到这一点吗？

示例（通过复选框在ng-if句柄内选择一个）：

<!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因其性质而起作用（隐藏的元素可以被操纵）但它不符合我的需要。

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

任何想法或解决方案？感谢

Answer 1

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

Answer 2

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

然后你的选择是动态的。稍后当您想要添加更多选项时，只需使用website.com/users?u=username等

Answer 3

您是否尝试过更改此内容：

$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

Answer 4

我认为“没有指令”是指没有自定义指令。

您可以使用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();
    }
  });
});

如何在不使用指令的情况下操纵ng-if中的元素

4 个答案: