javascript - AngularJS ng-if not working in a Form - Stack Overflow

admin管理员组

文章数量:1290945

I try to hide my form after it has been 'submitted'. I want to do it with ng-if. Clicking on the button 'See' displays the form on and off, but it does not work on the button 'Add'. What is the reason for that?

I have created a JSFiddle. Link to JSFiddle.

My Form:

  <form name="userAddForm" ng-submit="something()" class="form-horizontal" role="form">
    <div class="form-group">
      <label class="col-md-2 control-label">Username</label>

      <div class="col-md-3">
        <input name="username" ng-model="user.username" class="form-control" ng-required="true" placeholder="Username" type="text" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">Password</label>

      <div class="col-md-3">
        <input name="password" ng-model="user.password" class="form-control" placeholder="Password" type="password" ng-required="true" />

      </div>
    </div>



    <button ng-disabled="userAddForm.$invalid" type="submit" ng-click="add=!add" class="btn btn-success">
      <span class="glyphicon glyphicon-ok"></span> Add
    </button>
  </form>
</div>

I try to hide my form after it has been 'submitted'. I want to do it with ng-if. Clicking on the button 'See' displays the form on and off, but it does not work on the button 'Add'. What is the reason for that?

I have created a JSFiddle. Link to JSFiddle.

My Form:

  <form name="userAddForm" ng-submit="something()" class="form-horizontal" role="form">
    <div class="form-group">
      <label class="col-md-2 control-label">Username</label>

      <div class="col-md-3">
        <input name="username" ng-model="user.username" class="form-control" ng-required="true" placeholder="Username" type="text" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">Password</label>

      <div class="col-md-3">
        <input name="password" ng-model="user.password" class="form-control" placeholder="Password" type="password" ng-required="true" />

      </div>
    </div>



    <button ng-disabled="userAddForm.$invalid" type="submit" ng-click="add=!add" class="btn btn-success">
      <span class="glyphicon glyphicon-ok"></span> Add
    </button>
  </form>
</div>

• javascript
• html
• angularjs

Share Improve this question Follow asked Dec 22, 2015 at 13:20 QuaiQuai 18544 silver badges1818 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Please, don't use $parent!

Use proper prototypal inheritance.

The reason it doesn't work is because you are creating a new scope through the usage of ngIf.

It does not create an isolate scope so you don't have to worry about that.

---

When you pass a primitive, Javascript will "shadow" that value on the prototype of the new scope.

As such, it is no longer a direct reference to the value in your parent scope.

How do you get around that?

add a dot

That roughly translates into; use an object and bind to a property of that object. objects don't get shadowed as they are not a primitive. you get to keep the reference and it just works™.

jsfiddle

Every directive in angularjs create different level of scope.So,there is different level of scope, one at form tag and one at button inside the form which create parent and child relationship between form and button inside it.As add is,primitive variable,its changes in child is not reflected in parent scope.

So,either use $parent service or define thet add variable in following way.

$scope.objHidShow = {};
$scope.objHidShow.add= false;

I would do it by calling a controller function:

$scope.something = function() {
  $scope.shown = !$scope.shown;
}

What I did is to define that function and I made your controller working for the plete form.

https://jsfiddle/udc2rjrn/2/

The ng-if directive creates a new scope so you need to use $parent:

<button ng-disabled="userAddForm.$invalid" type="button" ng-click="$parent.add=!$parent.add" class="btn btn-success">

Updated JSFiddle

本文标签： javascriptAngularJS ngif not working in a FormStack Overflow