Javascript ng show with form condition不在AngularJS中的指令模板上工作_Javascript_Angularjs

Javascript ng show with form condition不在AngularJS中的指令模板上工作

javascript angularjs

Javascript ng show with form condition不在AngularJS中的指令模板上工作,javascript,angularjs,Javascript,Angularjs,在指令中，我想知道为什么CSS没有对属性做出相应的反应。My ng show是一个简单的布尔条件，它取决于特定输入的必需错误是否为真。简言之，我想要的是，当所需的验证为真时，必须隐藏take考试，直到用户在文本框中输入内容代码如下： <!DOCTYPE html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularj

在指令中，我想知道为什么CSS没有对属性做出相应的反应。My ng show是一个简单的布尔条件，它取决于特定输入的必需错误是否为真。简言之，我想要的是，当所需的验证为真时，必须隐藏take考试，直到用户在文本框中输入内容

代码如下：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>

  <body>
    <div class="container">
        <div id="login-container">
            <div class="form-group">
                <span class="glyphicon glyphicon-user"></span>
            </div>
            <form name="loginForm" novalidate>
                <div class="form-group">
                  Required condition -- {{ loginForm.student_code.$error.required }}
                    <!-- dasdas -- {{loginForm.student_code.$error.codeValidity  }} -->
                    <br />
                    <input type="text" class="form-control text-center" name="student_code"  ng-model="studentCode" placeholder="Enter Exam Code" required />
                    <!--<span class="errors" id="error-student-code" ng-if="loginForm.student_code.$error.codeValidity">{{ errors }}</span>-->
                </div>
            </form>
            <login-button form="loginForm"></login-button>
            <a href="register"><button class="btn btn-primary">Register</button></a>
          <!-- <br /> <strong>A message must be seen after the colon if codeValidity is true: </strong> -->
        </div>
    </div>
  </body>
  <script>
    var app = angular.module("myApp", []);

    app.directive('loginButton', loginButton);

    loginButton.$inject = ["$http", "$window"];

    function loginButton($http, $window){
        return {
          scope: {
              form: '='
            },
            template: '<button type="button" class="btn btn-primary" ng-show="{{ !form.student_code.$error.required }}" ng-click="click()">Take Exam</button>',
            controller: function($scope){
          $scope.click = function(){
            form = $scope.form;
            form.student_code.$setValidity('codeValidity', false);
            $scope.errors = "Code is Invalid";
          };
        }
        }
    }
  </script>
</html>


必需条件--{loginForm.student_code.$error.Required}


var-app=angular.module（“myApp”，[]）；
应用指令（“登录按钮”，登录按钮）；
loginButton.$inject=[“$http”、“$window”]；
函数loginButton（$http，$window）{
返回{
范围：{
表格：'='
},
模板：“参加考试”，
控制器：功能（$scope）{
$scope.click=function（）{
form=$scope.form；
表.学生代码$setValidity（'codeValidity'，false）；
$scope.errors=“代码无效”；
};
}
}
}

下面是提示：

您试图在

ng show

中插入变量时出错，但

ng show

采用了一个表达式。插值没有及时计算，其值将由

ng show

指令反映。相反，您应该允许

ng show

计算表达式并在必要时对其进行插值

i、 e.代替：

ng show=“{{！form.student_code.$error.required}}”

do:

ng show=“！form.student\u code.$error.required”

它现在可以工作了…检查更新的plunkr

 ng-show=" !form.student_code.$error.required "

您在绑定时出错。

当所需验证为真时，必须隐藏take考试，直到用户在文本框中输入的内容完全正确！谢谢是的，起初我做了ng show=“+！scope.form.student_code.$error.required+”，但您的解决方案实际上是完美的