angularJs - directive scope variable not binding - javascript

I have a binding problem with one of my directives that is causing me problems. Usually I don't have problems with binding but I can't see the bug. I have this directive:
radioMenuDirective.js
(function () {
"use strict";
var myAppModule = angular.module('myApp');
myAppModule.directive('radioMenuAllocateSection', function () {
return {
templateUrl: 'Scripts/app/shared/radiomenu/tmplAllocateSection.html',
restrict: 'E',
scope: {
allocatedTo: '='
},
controller: [
'$scope', 'genericService', function ($scope, genericService) {
$scope.radio = {
name: 'department'
};
}
],
}
});
})();
tmplAllocateSection.html
<label>Allocate Section To:</label>
<br/>
<form name="myForm" ng-controller="ExampleController" class="form-inline">
<div class="form-group">
<label>
<input type="radio" ng-model="radio.name" value="department">
Department
</label>
<label>
<input type="radio" ng-model="radio.name" value="user">
User
</label>
<div ng-if="radio.name == 'department'">
{{allocatedTo}}
<department-dropdown department="allocatedTo"></department-dropdown>
</div>
<div ng-if="radio.name == 'user'">
{{allocatedTo}}
<user-dropdown user="allocatedTo"></user-dropdown>
</div>
</div>
</form>
I can see the scope variable within my directive with
{{allocatedTo}}
However above this directive is another 1
tmplSectionCategories.html
<form role="form" name="frmContactDetails">
the enquiry data: {{enquiryData.selectedPersonOrDep}}
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Section Categories:</h3>
</div>
<h6>
<div class="panel-body">
<div class="form-group col-md-6 ignore-left-padding">
<subject-topic-dropdown selected-subject="enquiryData.subject" selected-topic="enquiryData.topic"></subject-topic-dropdown>
<keywords-dropdown selected-subject="enquiryData.subject"></keywords-dropdown>
<div class="form-group col-md-12 ignore-left-padding">
<genus-dropdown selected-genus="enquiryData.genus"></genus-dropdown>
</div>
<plant-names-dropdown selected-plant="enquiryData.plant"></plant-names-dropdown>
</div>
<div class="form-group col-md-6 ignore-left-padding">
<department-keyword-dropdown selected-department="enquiryData.department" selected-keyword="enquiryData.keyword"></department-keyword-dropdown>
<div class="form-group col-md-12 ignore-left-padding">
<label class="col-md-12 control-label ignore-left-padding">Quantity:</label>
<div class="col-md-8 ignore-left-padding">
<div class="col-md-2 ignore-left-padding">
<input type="number" ng-model="enquiryData.quantity" class="form-control input-sm" style="width: 50px" min="0" />
</div>
</div>
</div>
<radio-menu-allocate-section allocated-to="enquiryData.selectedPersonOrDep"></radio-menu-allocate-section>
</div>
</div>
</h6>
</div>
</div>
</form>
Directive declared on page
<radio-menu-allocate-section allocated-to="enquiryData.selectedPersonOrDep"></radio-menu-allocate-section>
</div>
{{enquiryData.selectedPersonOrDep}}
This doesn't show anything when the dropdown changes, so I have a problem where I don't have the value after selecting a value. I need it above for a button click handler.

Related

Using Bootstrap grid in angularjs components

What I'm basically trying to do is wrap grid element divs into angular components. The effort is to reduce typing strokes and get a standard for inputs:
<bootstrap-row>
<bootstrap-input-text col=6 ng-model="$ctrl.model" label="hey!">
</bootstrap-row>
Which would render something like the following
<div class="row">
<div class="col-md-6">
<label>hey!</label>
<input type="text" ng-model="$ctrl.model">
</div>
</div>
It works, kind of. The javascript works fine with the model binding, it's just that the CSS gets mangled. I have a codeopen here: https://codepen.io/anon/pen/JmxmoY?editors=1111
It has something to do with how the browser renders the <bootstrap-input-text> in between the row div and the column div. If I open up dev tools and inspect the difference between <bootstrap-row> and <bootstrap-input-text>, there are none. Is there a way around this or am I SOL?
Try this one
.component('bootstrapColumn', {
bindings: {
column: "#"
},
transclude: true,
template: function ($element, $attrs) {
$element.addClass('col-md-' + $attrs.column);
return '<div ng-transclude></div>';
}
})
Are you trying to apply a specific solution with components?
Cause you can try this as a Directive
.directive('bootstrapCol', function () {
return {
restrict: 'EAC',
scope: {
column: '#'
},
link: function (scope, element) {
var tc = 'col-md-' + scope.column;
element.addClass(tc);
}
}
})
It gives you plenty of properties either use it in your custom component
<bootstrap-row>
<bootstrap-col column="4">
<label>Input 5</label>
<input type="text" class="form-control">
</bootstrap-col>
<div class="bootstrap-col" column="4">
<label>Class</label>
<input type="text" class="form-control">
</div>
<div bootstrap-col column="4">
<label>Property</label>
<input type="text" class="form-control">
</div>
</bootstrap-row>
(function () {
'use strict';
angular
.module('test', [])
.component('bootstrapRow', {
transclude: true,
template: '<div class="row" ng-transclude></div>'
})
.component('bootstrapColumn', {
bindings: { column: "#"},
transclude: true,
template: function ($element, $attrs) {
$element.addClass('col-md-' + $attrs.column);
return '<div ng-transclude></div>';
}
}).directive('bootstrapCol', function () {
return {
restrict: 'EAC',
scope: { column: '#' },
link: function (scope, element) {
var tc = 'col-md-' + scope.column;
element.addClass(tc);
}
};
});
})();
<html>
<head>
<title>fun with bootstrap and elements</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
</head>
<body ng-app="test">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Input 1</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Input 2</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<bootstrap-row>
<bootstrap-column column="6">
<div class="form-group">
<label>Input 3</label>
<input type="text" class="form-control">
</div>
</bootstrap-column>
<bootstrap-column column="6">
<div class="form-group">
<label>Input 4</label>
<input type="text" class="form-control">
</div>
</bootstrap-column>
</bootstrap-row>
<bootstrap-row>
<bootstrap-col column="4">
<div class="form-group">
<label>Element-As Component</label>
<input type="text" class="form-control">
</div>
</bootstrap-col>
<div class="bootstrap-col" column="4">
<div class="form-group">
<label>Class</label>
<input type="text" class="form-control">
</div>
</div>
<div bootstrap-col column="4">
<div class="form-group">
<label>Property</label>
<input type="text" class="form-control">
</div>
</div>
</bootstrap-row>
</div>
</body>
</html>
<div class="row" ng-controller="PortfolioCtrl">
<div class="col-lg-4 col-md-4 col-sm-6 mb-3" ng-repeat-start="stuff in profile track by $index">
<div class="card">
<div class="card-header">
{{stuff.name}}
</div>
<div class="card-body">
<h5 class="card-title">{{stuff.title}}</h5>
<p class="card-text text-justify">{{stuff.desc}}</p>
</div>
</div>
</div>
<div ng-repeat-end>
<div class="clearfix visible-lg-block" ng-if="($index+1) % 6 == 0"></div>
<div class="clearfix visible-md-block" ng-if="($index+1) % 3 == 0"></div>
<div class="clearfix visible-sm-block" ng-if="($index+1) % 2 == 0"></div>
</div>
</div>

Parent ng-click action is getting triggered on child ng-click (from child, need to access $parentNodesScope for angular-tree-ui)

I’m trying to post Form and including angular-ui as one of element in form (http://plnkr.co/edit/6S881qNp3v7UI4Bo9pko?p=preview), whenever I am clicking “Insert Below”, form is getting posted (in addition to inserting one more input field)
event.stopPropagation() will also not work as to add tree ui , I have to take scope on parent and as soon as I get that, ng-click of parent is also getting called
Parent Controller
var app = angular.module('crudApp', [ 'ui.router', 'ngStorage', 'clockApp',
'myApp', 'plunker', 'radioB', 'timeTicker', 'TodoApp' ]);
app.constant('urls', {
BASE : 'localhost:3030',
USER_SERVICE_API : 'localhost:3030'
});
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url : '/',
templateUrl : 'partials/list',
controller : 'UserController',
controllerAs : 'ctrl',
resolve : {
users : function($q, UserService) {
console.log('Load all users');
var deferred = $q.defer();
UserService.loadAllUsers().then(deferred.resolve,
deferred.resolve);
return deferred.promise;
}
}
});
$urlRouterProvider.otherwise('/');
} ]);
Child Controller
var app = angular.module('plunker', ['ui.tree']);
app.directive('focus', function($timeout) {
return {
restrict: 'AC',
link: function(scope, element) {
$timeout(function(){
element[0].focus();
}, 0);
}
};
});
app.controller('MainCtrl', function($scope) {
$scope.nodes = [{
value: "",
price: "",
nodes: []
}]
});
View - list.ftl
Everything is working fine except the data is saving from child controller’s
ng-click instead of parent (form input)
<div class="generic-container">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
<span class="lead">User </span>
</div>
<div class="panel-body">
<div class="formcontainer">
<div class="alert alert-success" role="alert"
ng-if="ctrl.successMessage">{{ctrl.successMessage}}</div>
<div class="alert alert-danger" role="alert"
ng-if="ctrl.errorMessage">{{ctrl.errorMessage}}</div>
<form ng-submit="ctrl.submit()" name="myForm" class="form-
horizontal">
<input type="hidden" ng-model="ctrl.user.id" />
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable"
for="uname">Name</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.name"
id="uname"
class="username form-control input-sm"
placeholder="Enter your name" required ng-minlength="3" />
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="pnumber">Phone
Number</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.pnumber" id="pnumber"
class="username form-control input-sm"
placeholder="Phone Number" required ng-minlength="3"
ng-maxlength="10" ng-pattern="ctrl.onlyNumbers" />
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="address">Address</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.address" id="address"
class="username form-control input-sm" placeholder="Address"
required ng-minlength="3" />
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="work">Work</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.work" id="work"
class="username form-control input-sm" placeholder="Work"
required ng-minlength="3" />
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="price">Price</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.price" id="price"
class="form-control input-sm" placeholder="Price" required
ng-pattern="ctrl.onlyNumbers" />
</div>
</div>
</div>
<!-- Adding multinode value - start -->
<div ng-controller="MainCtrl">
<script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle>
<div class='form-group'>
<input class='username form-control input-sm' ng-model='node.value' focus>
<input class='form-control' ng-model='node.price' focus>
</div>
<button class='btn btn-primary btn-sm' ng-click='$parentNodesScope.$modelValue.splice($index+1,0,{value:"New", nodes:[]});'>Insert below</button>
<button class='btn btn-primary btn-sm' ng-click='node.nodes.push({value: "New", nodes:[]});'>Insert child</button>
</div>
</script>
<div ui-tree>
<ol ui-tree-nodes ng-model="nodes" id="tree-root">
<li ng-repeat="node in nodes" ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
{{nodes}}
</div>
<div class="row">
<div class="form-actions floatRight">
<input type="submit" value="{{!ctrl.user.id ? 'Add' : 'Update'}}"
class="btn btn-primary btn-sm"
ng-disabled="myForm.$invalid || myForm.$pristine">
<button type="button" ng-click="ctrl.reset()"
class="btn btn-warning btn-sm" ng-disabled="myForm.$pristine">Reset
Form</button>
</div>
</div>
</form>
</div>
</div>
</div>

AngularJS - add a checkbox to a widget

How do I add a checkbox to a widget in AngularJS?
I have a widget displayed on one of my webpages- the widget currently displays a couple of alarms whenever the alarms are raised (i.e. it's watching the value of a couple of variables- when those variables reach a certain value, the alarms are raised, and displayed on the widget).
What I want to do now, is add a checkbox to the widget, to toggle whether or not the alarms should be displayed on the widget. The HTML for the widget is:
<div data-ng-if="widget.name === 'umw-tag-box'">
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Tag:"></label>
<div class="col-sm-8">
<tags-input max-tags="1"
min-length="1"
key-property="tag"
display-property="tag"
template="tagItem.html"
um-max-tags-strict="true"
data-ng-model="widget.tag"
placeholder="Start typing a tag name"
replace-spaces-with-dashes="false"
on-tag-adding="onAddingTagItem($tag)"
on-tag-added="warning.tag = undefined"
um-tags-input-warning="{{warning.tag}}"
data-ng-class="{'hide-tags-input': widget.tag.length > 0}">
<auto-complete min-length="1"
load-on-focus="true"
load-on-empty="true"
display-property="tag"
template="autocomplete.html"
source="autocompleteTagsFilter($query)">
</auto-complete>
</tags-input>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background color:"></label>
<div class="col-sm-8">
<um-color-picker color="widget.color"></um-color-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background icon:"></label>
<div class="col-sm-8 ">
<um-icon-picker icon="widget.icon"></um-icon-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Flip:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" ng-model="widget.flip">
<span></span>
</label>
</div>
</div>
<div class="divider"></div>
<div class="row" ul-scroll-modal-to-me="focusDesc">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Description:"></label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" ng-model="widget.description"
data-ng-focus="focusDesc = true" data-ng-blur="focusDesc = false">
</div>
</div>
</div>
</div>
Inside the widget HTML, there is already what appears to be markup for a checkbox, though I can't actually see that on the page anywhere...
<div class="row ui-checkbox-row">
I tried adding a similar line inside the umw-tag-box div, and inside the divs a couple of levels below that, but couldn't get the checkbox to appear no matter where I placed it...
What is the best way to add a checkbox to the widget?
Edit
I tried adding a function inside the link function in the JS that would add/ display the checkbox on the page, but this doesn't seem to have made a difference to what's displayed in the browser:
.directive('umwTagBox', function($timeout, fxTag, umColorFilter){
return {
...
template: ...
...
link: function($scope, $element){
...
var setTagValue = function(tag){
...
//This is the code I added:
angular.module('showAlarmsCheckbox', [])
.controller('alarmsController', ['$scope', function($scope){
$scope.checkBoxMode1 = {
value1 : true,
value2 : 'YES'
};
}]);
...
};
...
}
}
})
Is there something I'm missing here/ something I'm doing wrong?

Angular form - disable validation by ng-required

I have a email field in a form:
<div class="col-xs-4">
<label>mail</label>
<input
ng-required="vm.isMailReqired"
pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
class="form-control sgn-rounded_textbox"
name="emailBox"
ng-disabled="!vm.model.signAgreement"
ng-model="vm.model.emails.beitEsek">
</div>
In my controller vm.isMailReqired is set to false but still the emailBox.$invalid is true and as a result my form controller(formsToSign) is false - formsToSign.$valid:false.
EDIT - entire form
<form name="formsToSign" novalidate class="form-validation">
<div class="row">
<div class="col-xs-12 form-group">
<div class="col-xs-4">
<label>mail</label>
<input
ng-required="vm.isMailReqired"
pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
class="form-control sgn-rounded_textbox"
name="emailBox"
ng-disabled="!vm.isMailReqired"
ng-model="vm.model.emails.beitEsek">
</div>
<div class="col-xs-4">
<label>Secondary maik</label>
<input pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
dir= "ltr"
class="form-control sgn-rounded_textbox"
name="emailBox1"
input-change = "vm.mailField"
ng-model="vm.model.emails.emailField"
>
</div>
<div class="col-xs-4">
<label>Manger Mail</label>
<input pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
dir= "ltr"
class="form-control sgn-rounded_textbox"
name="emailBox2"
input-change = "vm.mailField"
ng-model="vm.model.emails.menahelEmailField"
>
</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<!--Show this button when form is valid only -->
<button ng-class="{'invalidForm':( vm.buttonDisableValidation || formsToSign.$invalid)}" ng-disabled="vm.buttonDisableValidation || formsToSign.$invalid"
class="sgn_redBTN" ng-click="vm.showFormAndClose()">Show Forms</button>
</form>
Thanks for any help.
I've tailored your example with one input elements and made the fiddle and it is working without any
issues.
I guess the issue is with other input elements. Try to debug with {{formsToSign.$error}} to find the error
HTML
<div ng-controller="MyController as vm">
<form name="formsToSign" novalidate class="form-validation">
<div class="row">
<div class="col-xs-12 form-group">
<div class="col-xs-4">
<label>mail {{vm.isMailReqired}}</label>
<input ng-required="vm.isMailReqired" pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$" class="form-control sgn-rounded_textbox" name="emailBox" ng-disabled="!vm.isMailReqired"
ng-model="vm.model.emails.beitEsek" />
</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<!--Show this button when form is valid only -->
<button ng-class="{'invalidForm':( vm.buttonDisableValidation || formsToSign.$invalid)}" ng-disabled="formsToSign.$invalid" class="sgn_redBTN" ng-click="vm.showFormAndClose()">Show Forms</button>
</div>
</div>
</form>
<p>
<b>{{formsToSign.$error}}</b>
</p>
</div>
JS
angular
.module('myApp', []);
angular
.module('myApp')
.controller('MyController', MyController);
MyController.$inject = [];
function MyController() {
var vm = this;
vm.isMailReqired = true;
}
$invalid
boolean
True if at least one containing control or form is invalid.
mail
()\[\]\.,;:\s#\']+(\.[^()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^()[\]\.,;:\s#\']+\.)+[^()[\]\.,;:\s#\']{2,})$" class="form-control sgn-rounded_textbox" name="emailBox"ng-disabled="vm.model.signAgreement"ng-model="vm.model.emails.beitEsek">

How to set radio button checked initially in AngularJs?

I have created two tabs where the tabs gets navigated by checking radio buttons. One of the two tabs will be active initially but I need to have the corresponding radio button too checked initially.
<div ng-app="myApp">
<div class="account-tab-selector" id="tabs" ng-controller="TabsCtrl">
<ul>
<li class="col-sm-6 text-center" ng-repeat="tab in tabs">
<label for="{{tab.url}}">
<input ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)" type="radio" name="radio" id="{{tab.url}}" ng-model="choice.isSelected" value="true">{{tab.title}}</label>
</li>
</ul>
<div class="clearfix"></div>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<script type="text/ng-template" id="one.tpl.html">
<div class="customer-reg-form" id="new_customer_form">
<div class="sign-up-fb">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>
Sign Up With Facebook</a>
</div>
<div class="reg-form">
<div class="or-separator"><span>OR</span></div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="fname">First Name<span>*</span></label>
<div class="input-group">
<input name="firstname" id="fname">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="lname">Last Name<span>*</span></label>
<div class="input-group">
<input name="lastname" id="lname">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="mnumber">Mobile Number<span>*</span></label>
<div class="input-group">
<input name="mobile-number" id="mnumber">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="dlocation">Default Location<span>*</span></label>
<div class="input-group">
<select name="default-location" class="dropstyle">
<option></option>
<option>Kansas</option>
</select>
</div>
</div>
<div class="col-sm-12 form-group">
<label for="email">Email Address<span>*</span></label>
<div class="input-group">
<input name="email" id="email">
</div>
</div>
<div class="col-sm-12 form-group">
<label for="password">Password<span>*</span></label>
<div class="input-group">
<input name="password" id="password">
</div>
</div>
</div>
<div class="agreement">By clicking "Register" below, you are agreeing to our Terms of Service agreement.</div>
</div>
</div>
</script>
<script type="text/ng-template" id="two.tpl.html">
<div class="customer-reg-form" id="existing_customer_form">
<div class="sign-up-fb">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>
Login With Facebook</a>
</div>
<div class="reg-form">
<div class="or-separator"><span>OR</span></div>
<div class="row">
<div class="col-sm-12">
<label for="mnumber">Email Address<span>*</span></label>
<input id="mnumber">
</div>
<div class="col-sm-12">
<label for="mnumber">Password<span>*</span></label>
<input id="mnumber">
</div>
</div>
<div class="forgot-pwd">Forgot Password?</div>
</div>
</div>
</script>
</div>
var app = angular.module("myApp", []);
app.controller('TabsCtrl', ['$scope', function($scope) {
$scope.tabs = [{
title: 'I am a new customer',
url: 'one.tpl.html',
isSelected: true
}, {
title: 'I have an account',
url: 'two.tpl.html'
}];
$scope.currentTab = 'one.tpl.html';
$scope.onClickTab = function(tab) {
$scope.currentTab = tab.url;
};
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
};
}]);
Jsfiddle here
You have bound your radio button with $scope.choice.isSelected, you can set the value for this in controller or in ng-init it self.
Can you please add below two lines in your controller?
$scope.choice={};
$scope.choice.isSelected = "true";
Or in much better way, you can modify your tag like:
<li class="col-sm-6 text-center" ng-repeat="tab in tabs">
<label for="{{tab.url}}">
<input ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)" type="radio" name="radio" id="{{tab.url}}" ng-model="tab.isRadioChecked" value="true">{{tab.title}}</label>
</li>
And in your controller.
$scope.tabs = [{
title: 'I am a new customer',
url: 'one.tpl.html',
isSelected: true,
isRadioChecked: "true"
}, {
title: 'I have an account',
url: 'two.tpl.html'
}];
You can do this simply by setting the checked attribute for the input. For example:
<input type="radio" checked> This is a radio button

Categories