angularjs - Ng-if not refreshed when input changed -


problem

i have form subsequent fields not show until previous ones have been completed. in order @ previous ng-model variable. if null (ie not been filled out) fields not show. works great select, however, when add text input next field fails 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 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 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 insight take effect?</span><span>\n" +        "      <input type=\"text\" ng-model=\"when\"/></span></div>\n" +        "  <div ng-if=\"when\" class=\"what\"><span>what insight?</span><span>\n" +        "      <textarea ng-model=\"what\"></textarea></span></div>\n" +        "  <div ng-if=\"what\" class=\"why\"><span>why insight needed?</span><span>\n" +        "      <input type=\"text\" ng-model=\"why\"/></span></div>\n" +        "  <div ng-if=\"why\" class=\"how\"><span>how 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="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>

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

note when element removed using ngif scope destroyed , new scope created when element restored. scope created within ngif inherits parent scope using prototypal inheritance. important implication of if ngmodel used within ngif bind javascript primitive defined in parent scope. in case modifications made variable within child scope override (hide) value in parent scope.


Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -