如何根据另一个元素的真值选择按钮组项?

时间:2014-07-16 16:54:30

标签: angularjs angular-ui-bootstrap

我有自定义指令toggle-switch

<toggle-switch
    id="isModule"
    ng-model="isModule"
    type="checkbox"
    switch-active="{{ isActive }}"
    switch-on-label="Module"
    switch-off-label="Segment"
    switch-on="default"
    switch-off="default"
    switch-animate="true"></toggle-switch>

如果isModule为真,那么我需要我的按钮组来选择“视频”

<div class="form-group">
    <label class="col-sm-2 control-label">Media Type</label>
    <div class="col-sm-10">
        <div class="btn-group">
            <label class="btn btn-default" ng-model="media.mediaType" btn-radio="0" ng-disabled="(!isModule)">Audio</label>
            <label class="btn btn-default" ng-model="media.mediaType" btn-radio="1" >Video</label>
            <label class="btn btn-default" ng-model="media.mediaType" btn-radio="2" ng-disabled="(!isModule)">Text</label>
        </div>
    </div>
</div>

实现这一目标的正确方法是什么?我已经能够禁用其他两个项目(如您所见),但我不知道如何选择中间项目。

1 个答案:

答案 0 :(得分:0)

好吧,现在我把手表放在控制器中。不确定我是否喜欢这个,但它会做到更好的解决方案呈现它的自我。

$scope.$watch('isModule', function (oldValue, newValue) {
    if ((oldValue != null) && newValue) {
        $scope.media.mediaType = 1;
    }
});