javascript - 带有表单条件的 ng-show 不适用于 AngularJS 中的指令模板

标签 javascript angularjs

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

代码如下:

<!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>

这里是 plunker:https://plnkr.co/edit/plpKSGBtWqQnzhL60OfJ?p=preview

最佳答案

您错误地试图在 ng-show 中插入变量,但是 ng-show 接受了一个表达式。插值没有及时评估,因为它们的值无法被 ng-show 指令反射(reflect)。相反,您应该允许 ng-show 评估表达式并在必要时对其进行插值。

即而不是:ng-show="{{ !form.student_code.$error.required }}",

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

关于javascript - 带有表单条件的 ng-show 不适用于 AngularJS 中的指令模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37625961/

相关文章:

javascript - 将所有逗号分隔的数字替换为 javascript 中字符串中的点分隔数字

javascript - Jasmine spyOn 在 AngularJS 指令上无法正常工作

javascript - 无法在 Restangular 配置函数中传递依赖项 (AngularJs)

javascript - 在嵌套的 ng-repeat 中为我所在的任何对象动态抓取 Firebase 数据

javascript - 在 Angular post 请求之前从字段中去除空格

javascript - 如何静默调试 Safari 无法连接到安全的 WebSocket

javascript - 颜色谷歌虚拟化 bool 列

javascript - Graphql 将多个查询合并(合并)为一个?

css - AngularJS - 完成后更改 Sprite 动画

angularjs - 在AngularJS中,如何删除使用$ compile创建的元素?