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>
Related
I got a problem with my validation of textboxes.
I am trying to get something like this.
Click on the button, give a message when something is not filled in, while you fill the empty textbox, the 1 message of that textbox should dissapear.
If you click the button again, with 1 empty textbox, only the message of that textbox should appear.
If you click it twice with nothing filled, it should only appear once ...
I messed something up here ...
can someone get me on again?
Thank you in advance!
var list2 = [];
function valideer(el) {
divOutput = document.getElementById("msgbox1");
var strValideer = "<ul>";
if (document.getElementById("naam").value === "") {
list2.push("naam");
} if (document.getElementById("voornaam").value === "") {
list2.push("voornaam");
} if (document.getElementById("straatnr").value === "") {
list2.push("straatnr");
} if (document.getElementById("postgem").selectedIndex === 0) {
list2.push("postgem");
} if (document.getElementById("telgsm").value === "") {
list2.push("telgsm");
} if (document.getElementById("email").value === "") {
list2.push("email");
}
for (var i = 0; i < list2.length; i++) {
strValideer += "<li><b>" + list2[i] + ": </b>verplicht veld</li>";
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}
function inputChange(el) {
divOutput = document.getElementById("msgbox1");
strValideer = "<ul>";
var naam = document.getElementById("naam").value;
if (naam !== "") {
list2.splice(list2.indexOf(el.name), 1);
}
for (var i = 0; i < list2.length; i++) {
strValideer += "<li><b>" + list2[i] + ": </b>verplicht veld</li>";
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="bootstrap/css/bootstrap_custom.min.css" type="text/css" rel="stylesheet" />
<!--lay-out met bootstrap grid-->
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="woodfactory.js" type="text/javascript"></script>
</head>
<body>
<section class="container" id="userform">
<form action="js_form_ontvanger.html" method="get" class="form-horizontal" name="frmUserform" id="frmUserform" onsubmit="return validate(this)" oninput="inputChange(this)">
<fieldset>
<legend>Persoonlijke gegevens</legend>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<label class="control-label" for="naam">naam:</label>
<div class="controls">
<input type="text" id="naam" name="naam" placeholder="naam" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="voornaam">voornaam:</label>
<div class="controls">
<input type="text" id="voornaam" name="voornaam" placeholder="voornaam" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="straatnr">straat+nr:</label>
<div class="controls">
<input type="text" id="straatnr" name="straatnr" placeholder="straat+nr" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="postgem">post+gem:</label>
<div class="controls">
<select id="postgem" required onsubmit="valideer(this)" onclick="inputChange(this)">
<option value="">-- maak een keuze --</option>
<option value="2000">2000 Antwerpen</option>
<option value="9000">9000 Gent</option>
<option value="9300">9300 Aalst</option>
<option value="9400">9400 Ninove</option>
<option value="9450">9450 Haaltert</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="telgsm">tel/gsm:</label>
<div class="controls">
<input type="text" id="telgsm" name="telgsm" placeholder="tel/gsm" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">email:</label>
<div class="controls">
<input type="email" id="email" name="email" placeholder="e-mail" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<!--einde span7-->
</div>
<div class="span4 valid">
<div id="msgbox1" class="alert alert-error">
<div class="span1">
</div>
</div>
</div>
<div class="span1">
<div class="span1">
</div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</div>
</fieldset>
<fieldset>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success" onclick="valideer(this)">Verzenden</button>
</div>
</div>
<div class="span4 valid">
<div id="msgbox3" class="alert alert-success"></div>
</div>
<div class="span1"><!--lege kolom--></div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</fieldset>
</form>
</section>
<footer class="container">
<p>© 2013 The Wood Factory </p>
</footer>
</body>
</html>
I feel like your approach is a little more complicated than it needs to be.. See my attempt below
function valideer(current) {
var ids = ['naam', 'voornaam', 'straatnr', 'postgem', 'telgsm', 'email'];
var str = '<ul>';
ids.forEach(function(id) {
var el = document.getElementById(id);
if (el.value === '' && el !== current) {
str += "<li><b>" + id + ": </b>verplicht veld</li>";
}
});
str += '</ul>';
var outputDiv = document.getElementById("msgbox1");
outputDiv.innerHTML = str;
}
function handleFormSubmit(ev) {
ev.preventDefault();
valideer();
return false;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="bootstrap/css/bootstrap_custom.min.css" type="text/css" rel="stylesheet" />
<!--lay-out met bootstrap grid-->
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="woodfactory.js" type="text/javascript"></script>
</head>
<body>
<section class="container" id="userform">
<form action="js_form_ontvanger.html" method="get" class="form-horizontal" name="frmUserform" id="frmUserform" onsubmit="handleFormSubmit">
<fieldset>
<legend>Persoonlijke gegevens</legend>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<label class="control-label" for="naam">naam:</label>
<div class="controls">
<input type="text" id="naam" name="naam" placeholder="naam" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="voornaam">voornaam:</label>
<div class="controls">
<input type="text" id="voornaam" name="voornaam" placeholder="voornaam" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="straatnr">straat+nr:</label>
<div class="controls">
<input type="text" id="straatnr" name="straatnr" placeholder="straat+nr" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="postgem">post+gem:</label>
<div class="controls">
<select id="postgem" required onclick="valideer(this)">
<option value="">-- maak een keuze --</option>
<option value="2000">2000 Antwerpen</option>
<option value="9000">9000 Gent</option>
<option value="9300">9300 Aalst</option>
<option value="9400">9400 Ninove</option>
<option value="9450">9450 Haaltert</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="telgsm">tel/gsm:</label>
<div class="controls">
<input type="text" id="telgsm" name="telgsm" placeholder="tel/gsm" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">email:</label>
<div class="controls">
<input type="email" id="email" name="email" placeholder="e-mail" required onclick="valideer(this)">
</div>
</div>
<!--einde span7-->
</div>
<div class="span4 valid">
<div id="msgbox1" class="alert alert-error">
<div class="span1">
</div>
</div>
</div>
<div class="span1">
<div class="span1">
</div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</div>
</fieldset>
<fieldset>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success" onclick="valideer(this)">Verzenden</button>
</div>
</div>
<div class="span4 valid">
<div id="msgbox3" class="alert alert-success"></div>
</div>
<div class="span1">
<!--lege kolom-->
</div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</fieldset>
</form>
</section>
<footer class="container">
<p>© 2013 The Wood Factory </p>
</footer>
</body>
</html>
Some notes and observations:
Since the only check being used for validation is if it contains, an empty string, I have generalised the valideer function to iterate and operate on a given array of ids. This can be made even better by querying for inputs on your form using a DOM query and handling it like that.
You have added a lot of inline event handlers in your dom.. Some of them are redundant and not really needed. For example, having a simgle onsubmit on your form element should suffice (no need to add it for every input inside the form)
You were using a global variable list2 this is what was causing the repeated entries each time you click the button. Localising the scope would fix that (by moving it inside a function)
You're already using required property, which means you no longer need a js function to validate if your inputs are empty or not.
You should also notice that list2 is a global variable, which means that you should clean it at the end of every valideer() invocation.
All in all, you code seems very verbose .. try to find a better way to express you needs.
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>
I have a directive <stu-directive> with input field and a select in it. How do I get the values typed or selected in the directive function.
The html that uses my directive:
<div class="certFull">
<stu-directive obj ="certObj" ng-model="stuDirModel"></stu-directive>
<div class="addDir col-md-12 mg">
This is the directive's html:
<div ng-transclude class="container-fluid stuDirectiveClass mg">
<div class="rows">
<div class="col-md-12 mg">
<div class="form-group">
<div class="rows">
<div class="col-md-6"><label for="studentNameId">Student name</label></div>
<div class="col-md-6">
<select class="form-control" ng-model="selectStudent"> <!--get this value-->
<option>Stu1</option>
<option>Stu2</option>
<option>Stu3</option>
<option>Stu4</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group mg">
<div class="rows">
<div class="col-md-6"><label for="studentNameId">Student mark</label></div>
<div class="col-md-6">
<input type="text" class="form-control" ng-model="studentMark" placeholder="Student mark" /> <!--get this value-->
</div>
</div>
</div>
</div>
</div>
The directive function:
uiRouteApp.directive('stuDirective', function () {
return {
restrict: 'E',
//scope: {
// externalObj: '=obj'
//},
transclude: true,
templateUrl: 'htmlFiles/stuDirective.html',
link: function link(scope, element, attrs) {
//how do i access the input field values in directive
},
controller: ['$scope','$timeout', function ($scope,$timeout) {
console.log($scope.selectStudent); // undefined
}]
}
})
Always use . in ng-model
Define a variable in your directive then referance controller name before it in ng-model
uiRouteApp.directive('stuDirective', function () {
return {
restrict: 'E',
//scope: {
// externalObj: '=obj'
//},
transclude: true,
templateUrl: 'htmlFiles/stuDirective.html',
link: function link(scope, element, attrs) {
//how do i access the input field values in directive
},
controller: ['$scope','$timeout', function ($scope,$timeout) {
var stuDirectiveCtrl = this;
stuDirectiveCtrl.selectStudent = '';
stuDirectiveCtrl.log = function(){
console.log(this.selectStudent);
}
}],
controllerAs:'stuDirectiveCtrl'
}
})
<select class="form-control" ng-change="stuDirectiveCtrl.log()" ng-model="stuDirectiveCtrl.selectStudent"> <!--get this value-->
<option value="1">Stu1</option>
<option value="2">Stu2</option>
<option value="3">Stu3</option>
<option value="4">Stu4</option>
</select>
With usage of controllerAs you can referance your controller in html.
Man you haven't mentioned you directive in your html, also your directive is element based. you need to use your directive as element in html.
Please go through with these link might help you.
https://www.w3schools.com/angular/angular_directives.asp
https://docs.angularjs.org/guide/directive
See code snippet i am able to get the element in directive.
var app = angular.module('app', function() {});
app.directive('stuDirective', function () {
return {
restrict: 'E',
transclude: true,
//templateUrl: 'htmlFiles/stuDirective.html',
link: function link(scope, element, attrs) {
scope.Details = function(){
console.log(scope.selectStudent + ' ' +scope.studentMark);
};
},
controller: ['$scope','$timeout', function ($scope,$timeout) {
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="certFull" ng-app="app">
<stu-directive obj ="certObj" ng-model="stuDirModel"></stu-directive>
<div class="container-fluid">
<div class="rows">
<div class="col-md-12 mg">
<div class="form-group">
<div class="rows">
<div class="col-md-6"><label for="studentNameId">Student name</label></div>
<div class="col-md-6">
<select class="form-control" ng-model="selectStudent"> <!--get this value-->
<option>Stu1</option>
<option>Stu2</option>
<option>Stu3</option>
<option>Stu4</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group mg">
<div class="rows">
<div class="col-md-6"><label for="studentNameId">Student mark</label></div>
<div class="col-md-6">
<input type="text" class="form-control" ng-model="studentMark" placeholder="Student mark" /> <!--get this value-->
</div>
<div class="col-md-6">
<button ng-click="Details()">Call Dir</button>
</div>
</div>
</div>
</div>
</div>
<div class="addDir col-md-12 mg">
You need some event like this: (or if you do not want to use event then use $watch)
var app = angular.module('app', function() {});
app.directive('stuDirective', function () {
return {
restrict: 'E',
transclude: true,
//templateUrl: 'htmlFiles/stuDirective.html',
link: function link(scope, element, attrs) {
scope.Print = function(){
console.log(scope.selectStudent + ' ' +scope.studentMark);
};
},
controller: ['$scope','$timeout', function ($scope,$timeout) {
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="certFull" ng-app="app">
<stu-directive obj ="certObj" ng-model="stuDirModel"></stu-directive>
<div class="container-fluid">
<div class="rows">
<div class="col-md-12 mg">
<div class="form-group">
<div class="rows">
<div class="col-md-6"><label for="studentNameId">Student name</label></div>
<div class="col-md-6">
<select class="form-control" ng-model="selectStudent"> <!--get this value-->
<option>Stu1</option>
<option>Stu2</option>
<option>Stu3</option>
<option>Stu4</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group mg">
<div class="rows">
<div class="col-md-6"><label for="studentNameId">Student mark</label></div>
<div class="col-md-6">
<input type="text" class="form-control" ng-model="studentMark" placeholder="Student mark" /> <!--get this value-->
</div>
<div class="col-md-6">
<button ng-click="Print()">Call Dir</button>
</div>
</div>
</div>
</div>
</div>
<div class="addDir col-md-12 mg">
Into HTML you have to use your directive as element and add to it an attribute that contain the value you should use into directive, for example:
<stu-directive selected="selectStudent"></stud-directive>
Directive should use scope for save the value, for example:
uiRouteApp.directive('stuDirective', function () {
return {
restrict: 'E',
scope: {
selected: '='
},
transclude: true,
templateUrl: 'htmlFiles/stuDirective.html',
link: function link(scope, element, attrs) {
console.log(scope.selected);
}]
}
angular.module("myApp",[])
.directive('stuDirective', function () {
return {
restrict: 'E',
scope:{
selectStudent:'#',
studentMark:'#'
},
template: '<div class="container-fluid stuDirectiveClass mg"><div class="rows"><div class="col-md-12 mg"><div class="form-group"><div class="rows"><div class="col-md-6">label for="studentNameId">Student name</label></div> <div class="col-md-6"><select class="form-control" ng-model="selectStudent"><option>Stu1</option> <option>Stu2</option><option>Stu3</option> <option>Stu4</option></select></div></div></div></div><div class="col-md-12"><div class="form-group mg"><div class="rows"> <div class="col-md-6"><label for="studentNameId">Student mark</label></div><div class="col-md-6"><input type="text" class="form-control" ng-model="studentMark" placeholder="Student mark" /></div></div></div></div></div>',
link: function link(scope, element, attrs) {
},
controller: function ($scope,$timeout) { $scope.$watch('[studentMark,selectStudent]',function(value,value1){
console.log(value)
console.log(value1)
})
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body ng-app="myApp">
<stu-directive></stu-directive>
</body>
</html>
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
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.