如何在玉石模板中使用ng-disabled

时间:2013-11-29 18:28:22

标签: javascript node.js angularjs express pug

现在我使用nodejs并调查angularjs以获得乐趣)但是我有一些问题我想为我的博客项目添加文件上传而且我做了它。所以我只想在用户选择一些文件时显示上传按钮。它不是jQuery的问题,但我想知道如何用角度来做。所以这里有更多问题

这是Jade模板

form(method="post",enctype="multipart/form-data", action="/imageUpload")
              label Select image 
              input(type='file',name='image',onchange="angular.element($(this)).scope().inputChange()")
              button.btn.btn-primary(type='submit,ng-disabled='{{isEnable}})#uploadBtn Upload Image 

这是我的工作jQueryCod for validate

function UserController($scope)
{
    var sizeInput = $("input[type='file']").val().length;
    isEnable = sizeInput === 0 ;
    $( "#uploadBtn" ).toggle( isEnable )   
    $scope.inputChange = function(){
        sizeInput = $("input[type='file']").val().length;
        isEnable = !(sizeInput > 0);
        $( "#uploadBtn" ).toggle( isEnable );
    }
}

对于cource,我只能使用jquery - 但我想知道角度是如何工作的。

所以我想使用ng-disbled - 但它无法正常工作。在第一次加载时,它的位置为true - 而且全部 - 它不会改变

function UserController($scope)
{       
    var sizeInput = $("input[type='file']").val().length;
    $scope.isEnable = sizeInput === 0 ;       
    $scope.inputChange = function(){
        sizeInput = $("input[type='file']").val().length;
        myScope.isEnable = !(sizeInput > 0);

    }
}

我已经找到了答案,我们在这里使用的不是{{isEnable}}而只是ng-disabled ='isEnable'没有括号但是如何将它注入jade ???

2 个答案:

答案 0 :(得分:0)

删除{{}},因为您已经在ng-*属性中的Angular中写道:

ng-disabled='{{isEnable}}

要:

ng-disabled='isEnable'

答案 1 :(得分:0)

使用ng-show

button.btn.btn-primary(type ='submit,ng-show ='isEnable')#uploadBtn上传图片

这将告诉angular仅在isEnable为真时显示您的按钮。当它为假时,按钮将不会显示。