So I want this input to only show a property is true per the ng-if. The current code is:
<input type="button" class="naviaBtn naviaBlue" ng-if="ppt.Globals.hasDebitCard" ng-click="alertShow = (alertShow == 2 ? -1 : 2)" value="outstanding swipes">
Can I somehow add a ng-show inside of that ng-if expression and if so, then how? I thought maybe something like:
ng-if="ppt.Globals.hasDebitCard ? ng-show='true'"
You sure can! Here's an example.
<!DOCTYPE html>
<html>
<head>
<title>Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module("myApp", [])
.controller("myCtrl", [function(){
this.isOn = "on";
this.isChecked = true;
}]);
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl as VM">
<div ng-if="VM.isOn == 'on'" ng-show="VM.isChecked">
Hi there
</div>
<div>ng-show: <input type="checkbox" ng-model="VM.isChecked" /></div>
<div>ng-if:
<input type="radio" name="myRadio" ng-model="VM.isOn" value="on" />On
<input type="radio" name="myRadio" ng-model="VM.isOn" value="off" />Off
</div>
</body>
</html>
Related
I want to store value from checkbox into string
<label style="color:black; text-decoration:none; font-size:15px" href="#">
<input type="checkbox" ng-model="diet.v1" ng-true-value="'&diet=high-fiber'" ng-false-value="''" />High-Fiber</label>
How do i get value from ng-true-value (when it's checked) to string so i can use it ?
when i try something like this console.log(diet.v1); in js it wont work
Please check the following working sample code with ng-true-value, ng-false-value.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-checkbox-input-directive-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="checkboxExample">
<script>
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.diet = {
v1 : ''
};
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
<label>Value:
<input type="checkbox" ng-model="diet.v1"
ng-true-value="'&diet=high-fiber'" ng-false-value="''">
</label><br/>
<tt>value = {{diet.v1}}</tt><br/>
</form>
</body>
</html>
The radio button does not show up as checked by default. am trying to make my first option as checked by default. But it is not working.. any idea or suggestion?
<div Class ="form-group">
<label>Select your Email Hierarchy</label>
<div class="radio" ng-switch="deliveryMethod">
<div ng-switch-when="email">
<label>
<input type="radio" id="delivery-email" name="delivery-email"
ng-model="generated.delivery" ng-change="checkValidGenerate()"
class="check" value="EE/ER" checked="checked"/>
EE/ER
</label><br/>
<!-- some code--other option listed -->
Well, at first there's no necessity of the use of checked. It should work if you attribute the value to your ngModel, otherwise it won't work:
$scope.generated.delivery = 'EE/ER';
See the example below:
(function() {
'use strict';
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.deliveryMethod = 'email';
$scope.generated = {};
$scope.generated.delivery = 'EE/ER';
}
})();
<!doctype html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div Class="form-group">
<label>Select your Email Hierarchy</label>
<div class="radio" ng-switch="deliveryMethod">
<div ng-switch-when="email">
<label>
<input type="radio" id="delivery-email" name="delivery-email" ng-model="generated.delivery" ng-change="checkValidGenerate()" value="EE/ER"> EE/ER
</label>
<br/>
</div>
</div>
</div>
</body>
</html>
I am making a simple validation of required, but unable to find ng-Message working on wrong entry or on clicking submit. Can someone help me out where am I wrong?
HTML:
<html>
<head>
<!-- Script Files -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="form1" id="form1" novalidate>
<input type="text" name="age" ng-minlength="3" required/>
<div ng-messages="form1.age.$error" ng-show="(form1.age.$error.required || form1.age.$error.minlength) && (form1.age.$touched || form1.$submitted) " >
<div ng-message="required">This is required</div>
<div ng-message="minlength">Length is too less</div>
</div>
<a data-ng-click="submit(form1.$invalid)">Click</a>
</form>
<script>
//module declaration
var app = angular.module('myApp', ['ngMessages']);
//controller declaration
app.controller('myCtrl', function($scope) {
var submit = function(invalid){
if(invalid) return;
}
});
</script>
</body>
</html>
Your age input has no ng-model. Validation alá minlength only works if ng-model is present:
<input type="text" name="age" ng-model="age" ng-minlength="3" required/>
This is due to how validators work. You'll notice ng-model is not set, when $valid is false. There's always a hint in the docs as well: https://docs.angularjs.org/api/ng/directive/ngMinlength
Also ng-model doesn't need to be the same as the field name.
I want to reset the form before I click outside input. But before resetting data, an error message flashes. Any idea how to do it without flashes?
Plunker: http://plnkr.co/edit/hOBZ3vAjBhFNEzq1EReF?p=preview
HTML:
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<form name="myForm" novalidate ng-controller="myCtrl">
<input type="text" name="field" ng-minlength="8" ng-model="field">
<span ng-if="myForm.field.$invalid && myForm.field.$touched" style="color: red">Error</span>
<br>
Reset
</form>
</body>
</html>
Javascript:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.reset = function(){
$scope.field = "";
}
});
You should use ng-model-options for this special case where you can update actual ng-model value after particular set of interval
<input type="text" name="field" ng-minlength="8" ng-model="field"
ng-model-options="{ debounce: { 'default': 500, 'blur': 200 } }"/>
Working Plunkr
I am having an angular Js program like below.
HTML
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="mine"/> Mine
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="Other"/> Other
<textarea data-ng-disabled="test==='mine'" data-ng-model="htmlSpace" type="text"></textarea>
JS
var app = angular.module("Mydirective",[]);
app.controller("MyController",function($scope){
$scope.test = "mine";
});
The text area is getting disabled only when I select the radio button with value mine.I am expecting it to be disabled when the page loads only, cause I mentioned the value as mine in the controller. But its always enabled, Please help me with the issue
It works for me, please check below sample and check your angular version as well
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example88-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="Mydirective">
<script>
var app = angular.module("Mydirective",[]);
app.controller("MyController",function($scope){
$scope.test = "mine";
});
</script>
<div ng-controller="MyController">
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="mine"/> Mine
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="Other"/> Other
<textarea data-ng-disabled="test==='mine'" data-ng-model="htmlSpace" type="text"></textarea>
</div>
</body>
</html>
http://plnkr.co/edit/gBN41mrNfDXbEDLZchCp?p=preview