Javascript Angularjs，在受限标记（如select或table）内使用条件标记（如ng if）

以下是我想要实现的简单示例：

<select>
      <option value="" selected>Default</option>
      <span ng-if="fld.has_opts1">
        <span ng-bind-html="fld.opts1"></span>
      </span>
      <span ng-if="fld.has_opts3">
        <option value="k" ng-repeat="k in fld.opts3">{{k}}</option>
      </span>
</select>

这里我使用

span

来指定条件，但这不起作用，因为span不允许在

select

中使用，我也不能在这里使用

选项

，因为这将是嵌套在选项中的选项，这也是无效的

---

实际上，我希望它是一些不可见的标记，比如

，它将在最终标记中消失。目前如何在Angular中解决此类任务？

我同意@jpmorin的观点，更好的方法是通过

ng选项和自定义过滤器以某种方式实现这一点。但下面的方法应该有效

<select>
      <option value="" selected>Default</option>
        <span ng-if="fld.has_opts1" ng-bind-html="fld.opts1"></span>
        <option value="k" ng-repeat="k in fld.opts3" ng-if="fld.has_opts3">{{k}}</option>
</select>


违约
{{k}

您可以将
ng if
放在与执行
ng绑定html
的span相同的行上

ng if
将只从
DOM
中删除该跨度，这与仅隐藏元素的
ng show
不同。
使用您自己的自定义指令将html选项附加到您的select中

演示：

HTML

<div ng-controller="MyCtrl">
    <select ng-model="fld.selected" my-html-options="fld.opts1" my-html-options-if="fld.has_opts1">
        <option my-option-is-html="false" value="" selected>Default</option>
        <option my-option-is-html="false" ng-if="fld.has_opts3" ng-repeat="k in fld.opts3" value="{{k}}">{{k}}</option>
    </select>

    Selected: {{fld.selected}}
    <input type="checkbox" ng-model="fld.has_opts1" />
</div>


违约
{{k}
选定：{{fld.Selected}

JS

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

myApp.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.fld = {
        has_opts1: true,
        has_opts3: true,
        opts1: '<option value="Superhero">Superhero</option><option value="Superhero2">Superhero2</option>',
        opts3: ['apple', 'banana'],
        selected: ""
    };
}]);

myApp.directive('myHtmlOptions', ['$compile', function($compile) {
    return {
        restrict: 'A',
        scope: {
            myHtmlOptions: "=myHtmlOptions",
            myHtmlOptionsIf: "=myHtmlOptionsIf"  
        },
        link: function(scope, elem, attrs) {
            scope.$watch('myHtmlOptionsIf', function(newval, oldval) {
                if (scope.myHtmlOptionsIf) {
                    elem.append(scope.myHtmlOptions);
                } else {
                    angular.forEach(elem.children(), function(item) {
                        if (!angular.element(item).attr('my-option-is-html')) {
                            angular.element(item).remove();   
                        }
                    });
                }
            });
        }
    }
}]);

var myApp=angular.module（'myApp'，[]）；
控制器（'MyCtrl'，['$scope'，函数（$scope）{
$scope.fld={
选项1：正确，
选项3：正确，
选项1:‘超级英雄2’，
选项3:[‘苹果’、‘香蕉’]，
选定：“”
};
}]);
指令（'myHtmlOptions'，['$compile'，函数（$compile）{
返回{
限制：“A”，
范围：{
myHtmlOptions:“=myHtmlOptions”，
myHtmlOptionsIf:“=myHtmlOptionsIf”
},
链接：功能（范围、要素、属性）{
作用域：$watch（'myHtmlOptionsIf'，函数（newval，oldval）{
if（scope.myHtmlOptionsIf）{
元素追加（scope.myHtmlOptions）；
}否则{
angular.forEach（elem.children（），函数（项）{
if（！angular.element（item.attr（'my-option-is-html'））{
angular.element（item）.remove（）；
}
});
}
});
}
}
}]);
您正试图根据条件插入其他选项，对吗？您不能在
选择
元素上使用
ng options
指令，并根据您的条件在筛选的选项列表上循环吗？您不能在实际选项上使用ng show吗？也许可以解释一下fld.opts1包含的内容？您可能可以使用指令的
注释
版本，如
，但我不推荐使用它（请参阅文档：）最好的解决方案是使用带有自定义
过滤器的
ng选项
。但是，如果没有你的数据，我们将无法帮助你。谢谢，但是我认为自定义指令是最后的手段，仍然希望更简单的解决方案。如果你不想改变OPTS1的数据格式，这是你最好的选择。
<div ng-controller="MyCtrl">
    <select ng-model="fld.selected" my-html-options="fld.opts1" my-html-options-if="fld.has_opts1">
        <option my-option-is-html="false" value="" selected>Default</option>
        <option my-option-is-html="false" ng-if="fld.has_opts3" ng-repeat="k in fld.opts3" value="{{k}}">{{k}}</option>
    </select>

    Selected: {{fld.selected}}
    <input type="checkbox" ng-model="fld.has_opts1" />
</div>

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

myApp.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.fld = {
        has_opts1: true,
        has_opts3: true,
        opts1: '<option value="Superhero">Superhero</option><option value="Superhero2">Superhero2</option>',
        opts3: ['apple', 'banana'],
        selected: ""
    };
}]);

myApp.directive('myHtmlOptions', ['$compile', function($compile) {
    return {
        restrict: 'A',
        scope: {
            myHtmlOptions: "=myHtmlOptions",
            myHtmlOptionsIf: "=myHtmlOptionsIf"  
        },
        link: function(scope, elem, attrs) {
            scope.$watch('myHtmlOptionsIf', function(newval, oldval) {
                if (scope.myHtmlOptionsIf) {
                    elem.append(scope.myHtmlOptions);
                } else {
                    angular.forEach(elem.children(), function(item) {
                        if (!angular.element(item).attr('my-option-is-html')) {
                            angular.element(item).remove();   
                        }
                    });
                }
            });
        }
    }
}]);