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>
Related
I am learning angular and use radio button in my program. I found a problem that I can't explain it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<script src="bower_components/angular/angular.min.js"></script>
</head>
<body ng-app = "myApp">
<div class="container" ng-controller="myController">
<div><p style="margin: 30px auto"></p></div>
<label class="radio-inline" ng-repeat = "name in names" for = "{{name}}">
<input type="radio" ng-model="my.favorite" ng-value="name" id="{{name}}" name="favorite"></input>
{{name}}
</label>
<p>Your favorite is {{my.favorite}}</p>
<div>
<select ng-model="choosenone" ng-options="method.value as method.label for method in contactMethods">
<option value="">Tel or Email</option>
</select>
<p>You choose {{choosenone}}</p>
</div>
</div>
<script type="text/javascript">
angular.module('myApp',[])
.controller("myController",['$scope','$log',function ($scope,$log) {
//radio choices
$scope.names = ['pizza', 'unicorns', 'robots'];
$scope.my = { favorite: 'unicorns' };
//select chocices
$scope.contactMethods = [{value:"tel",label:"Tel."},{value:"email",label:"Email"}];
$scope.choosenone;
}]);
</script>
</body>
</html>
This code works fine, but if I make $scope.my in the javascript code equal to an empty string or undefined, and make the ng-model on the radio input HTML tag equal to "my", then the radio buttons can be mutiple selected. What's the reason?
<label class="radio-inline" ng-repeat="name in names" for="{{name}}">
<input type="radio" ng-model="my.favorite" ng-value="name" id="{{name}}" name="favorite" />
{{name}}
</label>
Probably because they all have the same id - change that. So for example id="{{name}}-$index" and it will work the way you want. If you keep the same name, only one of them can be selected.
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.
Upon pressing add button in myform, I want to get the value in the input Name using ng-model. I am using append in my form to add the next column.
However, I am facing issues in achieving this through the code below
function add(){
var stre;
stre="Name: <input type='text' ng-model='Name'><br>"
+"Result Name: <input type='text' value={{Name}}>"
$("#test").append(stre);
}
<!DOCTYPE html>
<html ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div id="test">
<button type="button" onclick="add()">add</button><br>
</div>
</body>
</html>
Use ng-repeat instead of append
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item.
var myApp = angular.module('myApp', []);
myApp.controller('myController', myController);
function myController($scope) {
$scope.elements = [];
$scope.add = function() {
$scope.elements.push({});
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller='myController'>
<div id="test">
<div ng-repeat='elem in elements'>
Name:
<input type='text' ng-model='elem.name'>
<br>Result Name:
<input type='text' value={{elem.name}}>
<hr>
</div>
<button type="button" ng-click="add()">add</button>
</div>
</div>
</div>
Fiddle here
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>
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