CODEWITHSUNDEEP
angularjsangularjs-scope
Jackie
Jackie

Reputation: 23567

Ng-if not refreshed when input changed

Problem

I have a form that I would like the subsequent fields to not show until the previous ones have been completed. In order to do this I look at the previous ng-model variable. If it is null (ie not been filled out) then the fields do not show. This works great for my select, however, when I add text to my input the next field fails to show up.

Example

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() {

}
<html>

<head>
  <link rel="stylesheet" href="style.css">
   <script data-require="[email protected]" 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>

Upvotes: 0

Views: 1444

Answers (2)

ngChris
ngChris

Reputation: 141

https://docs.angularjs.org/api/ng/directive/ngIf

Note that when an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored. The scope created within ngIf inherits from its parent scope using prototypal inheritance. An important implication of this is if ngModel is used within ngIf to bind to a javascript primitive defined in the parent scope. In this case any modifications made to the variable within the child scope will override (hide) the value in the parent scope.

Upvotes: 1

Jackie
Jackie

Reputation: 23567

Appears to be a problem with the scope. I went ahead and assigned it to the controller instead like ng-if="ctrl.who" and it works fine.

Upvotes: 0

Related Questions