I'm facing an issue where I want to display a link <a href> only when a certain condition is met, but the link doesn't show up as expected.
I have already attempted to experiment with changing the position of the code (inside or outside of <div controller>) and tried different tag options for the element containing the ng-if directive (span, div, ul...). Interestingly, this kind of code functions properly on another HTML file I have, leading me to believe that my Angular version is functioning correctly.
Below is the form in which I invoke 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 conditional statement following this:
<span ng-if="user.isSetup">
<a href="srsApp.html">Accès aux cours</a>
</span>
And here is the corresponding controller code:
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>
My expectation was for the link to become visible once I submit the form with a role and a name filled in. However, the link remains hidden. There are no error messages showing up in my Firefox console, and I can confirm that the function is triggered as the placeholders get reset after submission.