Ng-if not responding to model changes

Question

I'm co-developing a login system UI in an angular app and I would like the sign-up and log-in menus to appear depending on a button press. I could do this in the controller with a .on method, but apparently that's bad practice in terms of using angular properly.

My code is as follows (cut out unnecessary bits):

<section ng-model="login" ng-init="login=true"> <section ng-if="login"> LOGIN CONTENT <button ng-click="login = !login">Sign up for an account</button> </section> <section ng-if="!login"> SIGN UP CONTENT </section> </section>

I've no clue what I'm doing wrong, or if this is even the proper angular way of doing it.

ngIf creates isolated scope so it doesnt update 'login' on the controller. You need a dot in your model, i.e. someModel.login. — Zyga
– Zyga, Commented Dec 13, 2016 at 14:50
@Zyga I.e.: <ng-model="login.login" ng-init="login.login = true"? and then <ng-if="login.login> — Mox
– Mox, Commented Dec 13, 2016 at 14:57
something like that yes, maybe with better naming :) you will actually need to create 'login' object with 'login' property if you get my drift. — Zyga
– Zyga, Commented Dec 13, 2016 at 15:00

Sajeetharan · Accepted Answer · 2016-12-13 14:52:39Z

Create an object with the login field. Use it in the login, so the model will get updated.

DEMO

var app = angular.module('todoApp', []); app.controller("dobController", ["$scope", function($scope) { $scope.user ={}; } ]);

<!DOCTYPE html> <html ng-app="todoApp"> <head> <title>To Do List</title> <link href="skeleton.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> <script src="MainViewController.js"></script> </head> <body ng-controller="dobController"> <section ng-model="user.login" ng-init="user.login=true"> <section ng-if="user.login"> LOGIN CONTENT <button ng-click="user.login = !user.login">Sign up for an account</button> </section> <section ng-if="!user.login"> SIGN UP CONTENT </section> </section> </body> </html>

Zyga · Accepted Answer · 2016-12-13 15:04:23Z

As mentioned above, because ngIf directive creates isolated scope, you need a dot in your model, otherwise changes done to the primitive value will not "propagate" back to controller.

So create an object rather than primitive in controller, i.e.

$scope.someModel = { login: true};

and reference that in HTML as "someModel.login". This way you could also get rid of ngInit as its not necessarily a good use case for it.

Mistalis · Accepted Answer · 2016-12-13 15:01:39Z

Don't put ng-model on your first section tag.
Declare $scope.params = {}; in your controller, and then set its parameter login to true:

Check this Fiddle demo.

<section ng-init="params.login = true"> <section ng-if="params.login"> <button ng-click="params.login = !params.login">Sign up for an account</button> LOGIN CONTENT </section> <section ng-if="!params.login"> SIGN UP CONTENT </section> login is: {{params.login}} </section>

Is there any particular reasons why the button ought to be outside of the sections?

Collectives™ on Stack Overflow

Ng-if not responding to model changes

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related