AngularJS toggle from controller - javascript

I'm using AngularJS showhide here http://angular-ui.github.io/ui-utils/ this is what I have:
<div ui-toggle="showHide">
<div class="col-md-12">
<input class="form-control" id="id_password" name="password"
type="password" ng-model="password" placeholder="Password">
</div>
</div>
<p><a ng-click="showHide=!showHide">Toggle State: {{!!showHide}}</a></p>
This works however, how can I control the toggle directly from a controller?

Here's a fiddle showing the use of ng-show and ng-hide
http://jsfiddle.net/mikeeconroy/WUc94/
angular.module('myApp',[])
.controller('myCtrlr',['$scope',function($scope){
$scope.show = true;
$scope.toggle = function(){
$scope.show = !$scope.show;
};
}]);
HTML:
<div ng-app="myApp">
<div ng-controller="myCtrlr">
<div ng-show="show">I'm using ngShow!!!</div>
<div ng-hide="show">I'm using ngHide!!!</div>
<div>Value of "show": <strong>{{show}}</strong></div>
<button ng-click="toggle()">Toggle</button>
</div>
</div>
You could just as easily use one of the directives too:
<div ng-show="show">I'm using ngShow (show == true)</div>
<div ng-show="!show">I'm using ngShow (show == false)</div>

Related

ng-show with form condition not working on a directive template in AngularJS

In the directive I was wondering why the CSS is not reacting accordingly to the attributes. My ng-show is a simple boolean condition that depends if the required error of a certain input is true or not. In short what I want is while the required validation is true the take exam must be hidden until the user inputs something on the textbox
Here is the code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div class="container">
<div id="login-container">
<div class="form-group">
<span class="glyphicon glyphicon-user"></span>
</div>
<form name="loginForm" novalidate>
<div class="form-group">
Required condition -- {{ loginForm.student_code.$error.required }}
<!-- dasdas -- {{loginForm.student_code.$error.codeValidity }} -->
<br />
<input type="text" class="form-control text-center" name="student_code" ng-model="studentCode" placeholder="Enter Exam Code" required />
<!--<span class="errors" id="error-student-code" ng-if="loginForm.student_code.$error.codeValidity">{{ errors }}</span>-->
</div>
</form>
<login-button form="loginForm"></login-button>
<button class="btn btn-primary">Register</button>
<!-- <br /> <strong>A message must be seen after the colon if codeValidity is true: </strong> -->
</div>
</div>
</body>
<script>
var app = angular.module("myApp", []);
app.directive('loginButton', loginButton);
loginButton.$inject = ["$http", "$window"];
function loginButton($http, $window){
return {
scope: {
form: '='
},
template: '<button type="button" class="btn btn-primary" ng-show="{{ !form.student_code.$error.required }}" ng-click="click()">Take Exam</button>',
controller: function($scope){
$scope.click = function(){
form = $scope.form;
form.student_code.$setValidity('codeValidity', false);
$scope.errors = "Code is Invalid";
};
}
}
}
</script>
</html>
Here is the plunker: https://plnkr.co/edit/plpKSGBtWqQnzhL60OfJ?p=preview
You are incorrectly trying to interpolate the variable inside the ng-show, but ng-show takes an expression. Interpolated values aren't evaluated in time for their value to be reflected by the ng-show directive. Instead, you should allow ng-show to evaluate the expression and interpolate it if necessary.
i.e. instead of: ng-show="{{ !form.student_code.$error.required }}",
do: ng-show="!form.student_code.$error.required".
Updated Plunker
It works now...Check the updated plunkr.
ng-show=" !form.student_code.$error.required "
You were making mistake in binding.

Angular validation messages don't work with ng-show and two inputs

I have implemented a form with a mode. Form can have 'Create' or 'Edit' mode. Depending on the mode it shows some div in one place of the layout or another. Div content is the same and it's input and some validation messages for it.
Here's simplified example.
View:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="editForm">
<div ng-show='mode == "Edit"'>
<div class="form-group" ng-class="{true:'has-error',false:''}[editForm.FirstName.$valid === false && editForm.FirstName.$dirty]">
<input type="text" ng-model="foo" ng-maxlength="5" name="foo" required />
<div class="help-block" ng-messages="editForm.foo.$error" ng-if="editForm.foo.$dirty">
<p ng-message="required">Required</p>
<p ng-message="maxlength">Too long</p>
</div>
</div>
</div>
<div ng-show='mode == "Create"'>
<div class="form-group" ng-class="{true:'has-error',false:''}[edit.foo.$valid === false && edit.foo.$dirty]">
<input type="text" ng-model="foo" ng-maxlength="5" name="foo" required />
<div class="help-block" ng-messages="editForm.foo.$error" ng-if="editForm.foo.$dirty">
<p ng-message="required">Required</p>
<p ng-message="maxlength">Too long</p>
</div>
</div>
</div>
</form>
<div>
Mode: {{mode}} <br>
Value: {{foo}} <br>
Is form valid: {{editForm.foo.$valid}} <br>
</div>
</div>
</div>
Controller:
var myApp = angular.module('myApp',['ngMessages']);
myApp.controller('MyCtrl',function($scope){
$scope.mode = 'Edit';
});
Here's JSFiddle with working example.
The problem is - validation messages work properly only when the last input is shown. In Edit mode - even if it's the same - messages don't show correctly.
Instead of ng-show use ng-if directive.
ng-show causes browser to render both div elements, with ng-hide class on the element where ng-show expression is evaluated as false.
ng-if on the other hand causes div element to be not rendered if ng-if expression is false.

Modify ng-model from view

I´m pretty newbie on AngularJS, how can I update the value of my ng-model from my view?
Right now I have form and I´m updating app_key input, but when I call my module and I check the $scope.variable, the value has not change.
Here my code
<div>
<br>
<div class="field_row">
<label for="app_key">AppKey:</label>
<input id="app_key" type="text" ng-model="appKey"> --> this is the input that I´m changing the value
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" ng-click="selectUser()">
Select
</button>
</div>
And in my module I have the method selectUser
$scope.selectUser = function () {
$scope.setAppKey($scope.appKey); --> Here the appKey it´s not modified
};
Solution
I dont know why, but to make it works I need to pass the ng-model to the controller function
<input id="app_key" type="text" ng-model="appKey" ng-change="changeAppKey(appKey)">
I made this working JSFiddle using your code. It seems to work just fine. Are you sure your setAppKey function is correct ?
JS
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.selectUser = function () {
console.log($scope.appKey);
};
}
HTML
<div ng-controller="MyCtrl">
<div>
<div class="field_row">
<label for="app_key">AppKey:</label>
<input id="app_key" type="text" ng-model="appKey">
</div>
</div>
{{appKey}}
<div class="modal-footer">
<button type="button" class="btn btn-info" ng-click="selectUser()">
Select
</button>
</div>
</div>

How to set default value checked in a checkbox from database using AngularJS

While editing the record the data comes in their respective fields for editing, but the checkbox is not checked if its value is 1.
It should be in checked state if it has 1 and not checked if it has 0 as the datatype of the field is tinyint. I am retrieving the data from JSON array via PHP. I am trying to get value by ng-checked="{{rec.isSpecial}}" but it is not working.
Here is my HTML:
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-checked="{{rec.isSpecial}}" ng-model="rec.isSpecial">
<span class="fa fa-check"></span>Special
</label>
</div>
</div>
</div>
here is my JS
$scope.rec = $resource('api/AdminArea/category/edit/:id', {
id: id
}).get(function(data) {
$scope.rec = data;
});
Since your data returns numbers and not true or false values you could do like so:
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-checked="rec.isSpecial==1" ng-model="rec.isSpecial">
<span class="fa fa-check"></span>Special
</label>
</div>
</div>
</div>
see fiddle for more info
You don't need ng-checked at all, ng-model is enough for it to work. If your rec.isSpecial is set to 1 for it to be checked then just your input like this:
<input type="checkbox" ng-model="rec.isSpecial" ng-value="1" />
and the Angular will automatically check that checkbox.
The expression ng-checked={{ ... }} expects a true or false statement.
If you would set rec.isSpecial = true, in your Angular controller, your code should work!
'use strict';
var app = angular.module('MyApp',[]);
app.controller('myController', function ($scope) {
$scope.isSpecial =true;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="form-group" ng-app ="MyApp" ng-controller="myController">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-checked="{{isSpecial}}" ng-model="isSpecial">
<span class="fa fa-check"></span>Special
</label>
</div>
</div>
</div>
You don't really need the directive ng-checked if you are using ng-model in the tag input.
Since it is a checkbox, the model will be a boolean, so you need to make a cast. This example will work
HTML
<div data-ng-app="app">
<div data-ng-controller="MainController">
Check
<input type="checkbox" data-ng-model="isSpecial">
</div>
</div>
JS
angular.module('app', []);
angular.module('app')
.controller('MainController', mainController);
mainController.$inject = ['$scope'];
function mainController($scope){
$scope.check = 0;
$scope.isSpecial = ($scope.check === 1) ? true : false;
}

controller method never called?

I am new in AngularJS, I want to call signup method on button ng-click, but it never gets called.
<div class="row">
<div class="col-sm-5" style="" ng-controller="SignUpController">
<div class="row">
<button ng-click="$parent.signup()" class="form-control btn btn-primary">Sign-Up</button>
</div>
</div>
Angular Script
<script>
angular.module('index',[])
.controller('SignUpController', ['$scope', function($scope) {
$scope.signup=function(){
alert("");
};
}]);
</script>
Try this
<button ng-click="signup()" class="form-control btn btn-primary">Sign-Up</button>
in your case $parent does not have method signup

Categories