Question

我有一个如下的复选框，我想在检查或不检查时显示/隐藏出租车输入或chkno输入。

<input type="checkbox" id="chks" ng-model='chks' chk-no>

为了做到这一点，我写了一个如下指令，但它没有工作。我的指令中究竟出现了什么问题？

app.directive('chkNo', function($compile,$log)
{
    var template_taxid = "<label id='taxidlbl'>Tax ID Number</label><br/><input type=text' id='taxid' name='taxid' placeholder='Tax ID Number' ng-model='taxid' required>";
    var template_chkno = "<label id='chklbl'>Check Number</label><br/><input type='text' id='chn' placeholder='Checking Number' ng-model='chn' required>";

    var getTemplate = function(chks)
    {
        var template = '';
        if(chks){
            template = template_taxid;
        }
        else
        {
            template = template_chkno;
        }
    }
    var linker = function(scope,element, attrs)
    {
        element.html(getTemplate(scope.chks)).show();
        $compile(element.contents())(scope);
    }
    return{
        restrict    : 'EA',
        replace     : true,
        link        : linker
    }
});

Answer 1

你可以使用ng-show ng-hide

<input type="checkbox" ng-model='chks'>

<div ng-show"chks">
    <label >Tax ID Number</label>
    <br/>
    <input type=text' name='taxid' placeholder='Tax ID Number' ng-model='taxid' required>"
</div>
<div ng-hide"chks">
    <label>Check Number</label>
    <br/>
    <input type='text' placeholder='Checking Number' ng-model='chn' required>
</div>

AngularJS指令显示/隐藏任一模板

1 个答案: