问题

Question

问题

我有一个表单，我希望后续字段在前一个字段完成之前不显示。为了做到这一点，我看一下之前的ng-model变量。如果它为空（即未填写），则字段不显示。这对我的选择很有用，但是，当我在输入中添加文本时，下一个字段无法显示。

实施例

＆＃13;

var app = angular.module('insight', []);
app.directive('insightForm', function() {
  return {
    restrict: 'EA',
    scope: {},
    controller: InsightFormController,
    controllerAs: "ctrl",
    replace: true,
    template: "<div class=\"gradient-background stage1\">\n" +
      "  <div class=\"location\"><span>Please select a location</span><span>\n" +
      "      <select ng-model=\"location\">\n" +
      "        <option value=\"us\">United States</option>\n" +
      "        <option value=\"eu\">Europian Union</option>\n" +
      "        <option value=\"ca\">Canada</option>\n" +
      "      </select></span></div>\n" +
      "  <div ng-if=\"location\" class=\"who\"><span>Who does your insight affect?</span><span>\n" +
      "      <input type=\"text\" ng-model=\"who\"/></span><span>{{who}}</span></div>\n" +
      "  <div ng-if=\"who\" class=\"when\"><span>When does your insight take effect?</span><span>\n" +
      "      <input type=\"text\" ng-model=\"when\"/></span></div>\n" +
      "  <div ng-if=\"when\" class=\"what\"><span>What is the insight?</span><span>\n" +
      "      <textarea ng-model=\"what\"></textarea></span></div>\n" +
      "  <div ng-if=\"what\" class=\"why\"><span>Why is the insight needed?</span><span>\n" +
      "      <input type=\"text\" ng-model=\"why\"/></span></div>\n" +
      "  <div ng-if=\"why\" class=\"how\"><span>How is the insight used</span><span>\n" +
      "      <input type=\"text\" ng-model=\"how\"/></span></div>\n" +
      "</div>"

  }
});

function InsightFormController() {

}

＆＃13;

<html>

<head>
  <link rel="stylesheet" href="style.css">
   <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
  <script src="script.js"></script>
</head>

<body ng-app="insight">
  <insight-form></insight-form>
</body>

</html>

＆＃13;

Answer 1

Canonical XML Recommendation

请注意，使用ngIf删除元素时，其范围将被销毁，并且在还原元素时会创建新范围。在ngIf中创建的作用域使用原型继承从其父作用域继承。这一点的一个重要含义是，如果在ngIf中使用ngModel绑定到父作用域中定义的javascript原语。在这种情况下，对子作用域内的变量所做的任何修改都将覆盖（隐藏）父作用域中的值。

Answer 2

似乎是范围的问题。我继续把它分配给控制器，而不是像ng-if="ctrl.who"那样工作正常。

Ng-如果输入改变则不刷新

问题

实施例

2 个答案: