I'm trying to display a link <a href> when a condition is met, but the link never appears.
I have already tried to change the position (in/out of <div controller>) and the tag of the item containing the ng-if (span, div, ul...). This kind of code works on another HTML I have, so my Angular version seems okay.
Here is the form where I call the controller:
<div ng-controller="userRole">
<form ng-submit="setProfile()">
<select ng-model="userRole"
ng-options="role for role in roles">Role</select>
<input type="text"
ng-model="userName"
placeholder="Nom"></input>
<input type="submit"
value="Valider"></input>
</form>
</div>
The condition right after:
<span ng-if="user.isSetup">
Accès aux cours
</span>
And the actual controller:
var app = angular.module('srsApp', []);
app.controller('userRole', function($scope) {
$scope.roles = ['Professeur', 'Élève'];
$scope.user = {role:'', name:'', isSetup: false};
$scope.setProfile = function() {
if ($scope.userName !== '' && $scope.userRole !== '') {
$scope.user.role = $scope.userRole;
$scope.user.role = $scope.userName;
$scope.user.isSetup = true;
$scope.userRole = '';
$scope.userName = '';
}
};
});
</script>
I expected the link to appear once I submit the form with a role and a name, but the link stays hidden. No error from my Firefox terminal, and I know it enters the function because the placeholders are re-initialized.
As mentionned by #AnuragSrivastava, the <span> should be in the <div ng-controller="userRole">. As I said I tried it, but previous circumstances (syntax errors NOT highlighted by terminal) prevented this to work.
Related
This is my HTML structure in Ionic project.
<div ng-model="pollPage.test.username">updated content</div>
{{pollPage.test.username}}
Controller:
vm.test = {
username : 'static',
}
When I use check my page, its getting 'static' text however it should be 'updated content'
Whats the problem? I guess everything is right but its not working.
Thanks.
Your code is wrong it shoulbe like this:
<div ng-controller="yourController as vm">
<input type="text" ng-model="vm.pollPage.test.username">
<div>{{pollPage.test.username}}</div>
</div>
You cant asign ng-model to a div it must be on elements I/0 like inputs, dropdowns, checks, etc.
Controller:
var vm = this;
vm.pollPage = {};
vm.pollPate.test = {
username : 'static',
}
ng-model should be on an element that its content changes like: input, select, textarea...etc
I have a form field (input text) with an ng-if being false at the begining. At some point the ng-if value become true.
When this happen, I want to execute some javascript which manipulate the DOM. To keep it simple, let's say that I need to select the input value and focus the field.
<input type="text" ng-value="foo" ng-if="show" onshow="doSomething()"/>
<button ng-click="toggle()"></button>
The JavaScript
ctrl.foo = "bar";
ctrl.show = false;
ctrl.toggle = function(){
ctrl.show = !ctrl.show;
}
I know that it looks like a "non-angular approach", but here I think the action is not model related.
Since the ng-if directive execute the template each time show become true, you can use ng-init for that. See the following snippet and replace alert('test); by anything you want.
angular.module('test', []).controller('test', function($scope, $element) {
$scope.show = false;
$scope.toggle = function() {
$scope.show = !$scope.show;
};
$scope.init = function() {
alert($element.find('input').val());
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="test">
<input type="text" value="foo" ng-if="show" ng-init="init()" />
<button ng-click="toggle()">Toggle</button>
</div>
</div>
EDIT: It seems my issue is more complex than the simple typo in the code below. I have 3rd party components interacting and raising change events on the inputs which angular is picking up when I don't want it to. The problem is somewhere in there. I will try to find a simple fiddle and update the question if I manage it.
I have a pair of inputs, which have an ng-model and share an ng-change function. The ng-change sets a boolean value in the controller which is supposed to update the class(es) on the inputs through an ng-class directive. However the first of the two inputs never seems to get any updates to it's class. Here is a simplified version:
View:
<div ng-controller='TestCtrl'>
<input type="text" ng-class="{ 'invalid': firstInvalid }" ng-model="firstValue" ng-change="doOnChange()"></input>
<input type="text" ng-class="{ 'invalid': secondInvalid }" ng-model="secondValue" ng-change="doOnChange()"></input>
</div>
Controller:
function TestCtrl($scope) {
$scope.firstInvalid = false;
$scope.secondInvalid = false;
$scope.firstValue = '';
$scope.secondValue = '';
$scope.doOnChange = function () {
console.log('change fired');
$scope.firstInValid = !$scope.firstInvalid;
$scope.secondInvalid = !$scope.secondInvalid;
};
};
Codepen:
http://codepen.io/Samih/pen/ZGXQPJ
Notice how typing in either input, the second input updates with the class just as I would expect, however the first never gets the 'invalid' class.
Thanks in advance for your help.
Check your code for typos:
This line
$scope.firstInValid = !$scope.firstInvalid;
should be
$scope.firstInvalid = !$scope.firstInvalid;
It should be $scope.firstInvalid, not $scope.firstInValid.
It seems to work for me :
Just edited 'firstInvalid'.
View:
<div ng-controller='TestCtrl'>
<input type="text" ng-class="{ 'invalid': firstInvalid }" ng-model="firstValue" ng-change="doOnChange()"></input>
<input type="text" ng-class="{ 'invalid': secondInvalid }" ng-model="secondValue" ng-change="doOnChange()"></input>
</div>
Controller:
function TestCtrl($scope) {
$scope.firstInvalid = false;
$scope.secondInvalid = false;
$scope.firstValue = '';
$scope.secondValue = '';
$scope.doOnChange = function () {
console.log('change fired');
$scope.firstInvalid = !$scope.firstInvalid;
$scope.secondInvalid = !$scope.secondInvalid;
};
};
Codepen: http://codepen.io/vikashverma/pen/BNwKmQ
I started working with angular about 2 days ago. I'm still wrapping my head around how to do many things. Right now, I am trying to have a tooltip appear with the information pertaining the clicked "tag". I defined a "tag" as a <span> element with a ng-toolkitlike so:
<div id="list-of-words" ng-controller="inlineEditorController" ng-click="hideTooltip()">
<!-- This is the tooltip. It is shown only when the showtooltip variable is truthful -->
<div id="tooltip" class="tooltip" ng-click="$event.stopPropagation()" ng-show="showtooltip">
<input type="text" ng-model="value" />
</div>
<div ng-repeat="w in words">
<span class="tag" ng-click="toggleTooltip($event)">{{w.content}}</span>
</div>
</div>
my controller is as such:
var app = angular.module('myApp', []);
app.controller('inlineEditorController', ['$scope', function($scope){
$scope.inlineEditor = function(){
$scope.showtooltip = false;
$scope.value = 'Edit me.';
$scope.hideTooltip = function(){
$scope.showtooltip = false;
}
$scope.toggleTooltip = function(e){
e.stopPropagation();
$scope.showtooltip = !$scope.showtooltip;
}
};
})]);
what I'm attempting to do is to change the 'Edit me.' to display the content from {{w.content}} but I have no idea how to do this. Everything I've tried so far has failed.
To get item content you can use:
<span class="tag" ng-click="toggleTooltip($event,w.content)">{{w.content}}</span>
So, controller should be:
$scope.toggleTooltip = function(e,content){
e.stopPropagation();
$scope.showtooltip = !$scope.showtooltip;
$scope.value = content;
}
You can use $event.currentTarget to get the element. i.e. e.currentTarget in your controller.
having a problem with angularjs logic here
I want to show the login link only when there is no user loggedin, and only show the logout link to logged in user, but it doesnt work properly
my HTML
<section ng-controller="a" ng-show="auth = false">
Sign in
</section>
<section ng-controller="b" ng-show="auth = true">
Sign out
</section>
The sign in is working well
this is my Controller
login Controller
function ($scope, Service){
$scope.auth = true;
$scope.signin = function($event, userID, passwd){
Service.signin(userID,passwd).then(
function (response){
$scope.auth = true;
});
}]).
logout Controller
function ($scope, Service){
$scope.auth = false;
$scope.signout = function($event){
Service.signout().then(
function (response){
$scope.auth = false;
});
}]).
those 2 log out and log in links are basically in my main page. I dont want to create a lot of pages, therefore I want to hide each other. When the user click the log in link, it will run the angularjs router, in this case /login, there is another templateURL for the form and it will be appended directly to the main page. Once the user has typed in the userID and password, the user need to click submit button, this is the code
<form role="form" name="form1">
<label for"userID">UserID</label><input type="text" id="userID" ng-model="userID">
<label for"passwd">Password</label><input type="text" id="passwd" ng-model="passwd">
<button data-ng-click="signin($event,userID,passwd); reload()">Login</button>
the reload() function will directly refresh the page. I am using the $window.location.reload()
Your equals comparison is incorrect.
This is assigning a value of false to auth:
ng-show="auth = false"
What you want is this (double and triple equals do comparisons)
ng-show="auth === false"
You can also do this:
<section ng-controller="a" ng-show="!auth">
Sign in
</section>
<section ng-controller="b" ng-show="auth">
Sign out
</section>
Actually You need Two works for this task
First Work:-
You need to assign auth varibale in $rootScope not $scope. because this object used in two controller.
Like
function ($scope, dataService, $rootScope){
$scope.auth = true;
$scope.signin = function($event, userID, passwd){
Service.signin(userID,passwd).then(
function (response){
$rootScope.auth = true;
});
}]).
Second Work:
You need to change ng-show="auth = false" to ng-show="auth === false". You have used single equal. it should be double or triple equal
OR
if you assigned the object in $rootScope, then you don't need to check the condition for is true or false in the element. because you already define auth is false or true in your controller. So you can just call ng-show="auth only.
Just try the followingng-show="auth"
Please let me know if it is still not working..