Angular Material Dropdown with Router ( UI - Router ) - javascript

when user clicks on the person it calls a form (form.html) using ui-router logic defined in app.js. I have 2 type of drop-down boxes, (1) using select tag and (2) using md-select tag. Pages works fine until i click on 2nd dropdown, which doesn't open the dropdown option window instead it freezes the page. I added code here in plunker however page routing doesn't work in plunker but you can reference the code.
index.html
<body ng-app="myApp">
<div class="col-sm-3 sidenav">
<div class="well"> <!-- container to hold status bar and form -->
<nav class="navbar navbar-default navbar-custom">
<a style="font-size:2.5em;position: absolute; left: 50%;" ui-sref="form"><span class="glyphicon glyphicon-user fa-5x" id="Icon"></span></a>
</nav>
<div class="column-nav-form" ui-view="formColumn" > <!--holds the form -->
</div>
</div>
</div>
</body>
form.html
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h4> Normal DropDown </h4>
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<p>I have three elements in my list, you should be able to pick whichever you like</p>
<div ng-app="myApp" ng-controller="myCtrl">
<h4> Material DropDown </h4>
<md-select onclick='console.log("clicked")' ng-model="selectedFilter" placeholder="Select a filter"> <md-select-label>{{ selectedFilter.name }}</md-select-label>
<md-option ng-value="opt" ng-repeat="opt in filters">{{ opt.name }}</md-option>
</md-select>
</div>
</body>
app.js
var myApp = angular.module('myApp', [ 'ngAnimate', 'ngAria', 'ui.bootstrap', 'ngMaterial', 'ngMessages', 'ui.router' ]);
//routing
angular.module('myApp').config(function ($stateProvider){
$stateProvider
.state('form', {
url:"/form",
views: {
"listColumn": {
},
"formColumn": {
templateUrl: "/form.html"
}
}
})
});
//dropdown
myApp.controller('myCtrl', function($scope) {
//log
console.log($scope.names);
$scope.names = ["Emil", "Tobias", "Linus"];
$scope.filters = [
{
value: 'mine',
name: 'Assigned to me'
},
{
value: 'undefined',
name: 'Unassigned'
},
{
value: 'all',
name: 'All Tickets'
},
{
value: 'new',
name: 'New Tickets'
}
];
//log
console.log($scope.filters);
console.log($scope.selectedFilter);
});
http://plnkr.co/edit/SB7MUM44Ly01aWyL5M28?p=preview
View upon clicking person icon
Note: Dropdown for md-select doesn't load.
Thanks in advance

Changed .css and .js version to have the same and it fixed it.
angular-material.js ( v 1.0.6 )
angular-material.css ( v 1.0.6 )
Links:
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>-->

Related

Navbar directive doesn't appear on index.html - Angularjs

I'm new to AngularJS and trying to make a web app.
I was studying for directives from CodeAcademy and for my application decided to make a directive navbar, so every time I need it, I can call it.
But the problem is, it doesn't show in the index.html. I'm using grid in my index.html
Also I would like to know, if there is a better way in navbarCtrl.js to make it like
rest: {'About','Contact','Resources'} instead of writing them one by one.
Many thanks
navInfo.html
<link rel="stylesheet" type="text/css" href="/css/navbar.css" />
<header>
<div class="nav-placeholder">
<img src="/img/letter-y.png" ng-src="{{info.icon}}" />
<i class="menu-toggle-btn"></i>
<nav class="navigation-menu">
<a class="title" href="#">{{info.title}}</a>
<a class="rest" href="#">{{info.rest}}</a>
<a class="rest" href="#">{{info.rest}}</a>
<a class="rest" href="#">{{info.rest}}</a>
</nav>
</div>
</header>
navbarCtrl.js
var app = angular.module('nav', []);
app.controller('navbarCtrl', ['$scope', function($scope) {
$scope.navs = [
{
icon: '/img/letter-y.png',
title: 'Yedy',
rest: 'About',
rest: 'Contact',
rest: 'Resources'
}
];
}]);
navbarDirective.js
app.directive('navInfo', function(){
return{
restrict: 'E',
scope:{
info:'='
},
templateUrl: 'src/js/directives/navInfo.html'
};
})
index.html
<body ng-app="AppYedy">
<!-- Navbar -->
<div class="header" ng-controller="navbarCtrl">
<div ng-repeat="nav in navs">
<nav-info info="nav"></nav-info>
</div>
</div>

AngularJS - Dynamic Checkboxes to hide/show Divs

I'm new to front-end web development. I am creating checkboxes dynamically using AngularJS.
<div ng-repeat="x in Brands" style="margin-left: 20px">
<input type="checkbox" ng-model="newObject[x.product_brand]">
<label> {{ x.product_brand }} </label>
</div>
Following the methods given on the links below, I want to hide/show divs using
using the dynamically created checkboxes.
Dynamic ng-model
ng-show
Here's the code-
<div class="item panel panel-default" ng-repeat="x in Brands" ng-show="newObject[x.product_brand]">
<div class="panel-heading">
{{x.product_brand}}
</div>
<div class="panel-body">
</div>
</div>
Controller-
app.controller('BrandController', function($scope, $http) {
getProductsInfo();
function getProductsInfo() {
$http.get("sql.php").success(function(data) {
$scope.Brands = data;
});
};
});
But it is not working. Checking/Unchecking the checkboxes does nothing.
I think you need something like this runnable fiddle. This kind of handle is easy to manage with AngularJS. Welcome =) !!! Please note: The $timeout is to simulate your async $http request - its not a part of the solution.
View
<div ng-controller="MyCtrl">
<div ng-repeat="x in Brands" style="margin-left: 20px">
<input type="checkbox" ng-model="x.active">
<label> {{ x.product_brand }} </label>
</div>
<div class="item panel panel-default" ng-repeat="x in Brands" ng-show="x.active">
<div class="panel-heading">
{{x.product_brand}}
</div>
<div class="panel-body">
</div>
</div>
</div>
AngularJS demo application
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope, $timeout) {
$scope.Brands = [];
init();
function init () {
$timeout(function () {
$scope.Brands = [{
product_brand: 'brand 1'
},{
product_brand: 'brand 2'
},{
product_brand: 'brand 3'
},{
product_brand: 'brand 4'
}];
});
}
});
Probably it is not working because you never defined newObject on the $scope. So actually you are trying to access undefined[x.product_brand].
Something like $scope.newObject = {}; in your Controller should do the trick.

AngularJS Bootstrap HTML in Tabs

I'm new to AngularJS and am trying to build a simple site with three tabs. I like the Bootstrap Tabs interface so I'm building off of that:
example.js
angular.module('base', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('base').controller('UiCtrl', function ($scope, $window) {
content1 = "Bunch of Figs";
array2 = ["Newton 1", "Newton 2"];
content2 = array2.join('<br><br>');
content3 = "Bunch of Widgets";
$scope.tabs = [
{ title:'Figs', content:content1 },
{ title:'Newtons', content:content2 }, //, disabled: true },
{ title:'Widgets', content:content3, select:'alertMe()' }
];
$scope.alertMe = function() {
setTimeout(function() {
$window.alert('You\'ve selected the widget tab!');
});
};
$scope.model = {
name: 'Tabs'
};
});
index.html
<!doctype html>
<html ng-app="base">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style type="text/css">
form.tab-form-demo .tab-pane {
margin: 20px 20px;
}
</style>
<div ng-controller="UiCtrl">
<p>
<uib-tabset active="activeJustified" justified="true">
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select">
{{tab.content}}
</uib-tab>
</uib-tabset>
</div>
</body>
</html>
I have two problems:
1) The HTML tags in the join are not treated as HTML in the tabs.
2) The select callback is not set to the dynamic tab.
How can I display HTML inside the tabs?
How can I attach select callbacks to dynamic tabs?
1- You have to use ng-bind-html in your html, and $sce.trustAsHtml() in your controller
HTML:
<uib-tabset active="activeJustified" justified="true">
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select()">
<div ng-bind-html="tab.content"></div>
</uib-tab>
</uib-tabset>
CONTROLLER:
angular.module('base').controller('UiCtrl', function ($scope, $window, $sce) {
content1 = $sce.trustAsHtml("<h1>Html content<br/> example</h1>");
$scope.tabs = [
{ title:'Figs', content:content1 },
{ title:'Widgets', content:content3, select: $scope.alertMe }
];
....
});
2- You aren't calling the function.
HTML:
Change select="tab.select" to select="tab.select()".
CONTROLLER:
Change select: 'alertMe()' to select: $scope.alertMe
Check this post about ng-bind-html
Check ui.boostrap docs about tabs
1. How can I display HTML inside the tabs?
=> You can use ng-bind-html and $sce.trustAsHtml()
HTML
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select()">
<span ng-bind-html="tab.content"></span>
</uib-tab>
JS
$scope.tabs = [
{ title:'Figs', content: $sce.trustAsHtml(content1) },
{ title:'Newtons', content: $sce.trustAsHtml(content2) }, //, disabled: true },
{ title:'Widgets', content: $sce.trustAsHtml(content3), select: $scope.alertMe }
];
2. How can I attach select callbacks to dynamic tabs?
=> Change select="tab.select" to select="tab.select()" and { title:'Widgets', content:content3, select:'alertMe()' } to { title:'Widgets', content: $sce.trustAsHtml(content3), select: $scope.alertMe }
$scope.alertMe must be defined before $scope.tabs
==> You can refer to this demo: https://codeide.co/master/qVGVQyWG
I choose to skip the tab component. Mostly because it did not have back button support. Further it became tricky to navigate to ex: the 3:rd tab from another page. So I used simple routing instead. ex: if there are 3 tabs I have 3 pages with specific routing. To avoid duplicating tab menu I created a component that i put in all three pages.
<ul ng-controller="tabsCtrl as tabs" class="nav nav-tabs">
<li ng-class="{'active':tabs.generalTab.isActive}">
<a ng-href="{{tabs.generalTab.path}}" translate>general.GENERAL</a>
</li>
<li ng-class="{'active':tabs.settingsTab.isActive}">
<a ng-href="{{tabs.settingsTab.path}}" translate>settings.MENU_LABEL</a>
</li>
<li ng-class="{'active':tabs.extrasTab.isActive}">
<a ng-href="{{tabs.extrasTab.path}}" translate>extras.MENU_LABEL</a>
</li>
</ul>

Why does my custom AngularJS directive not work within a select option?

I have a custom directive that I want to use within a select option element. I explicitly do not want to move the select into the directive's template, because I use the same directive at other places, too. Unfortunately, I cannot get it to work within a select option, probably because there is some intricate detail which I do not yet understand. Ideas, anyone?
Here is my simplified example, derived from a documentation example (also on Plunker at http://plnkr.co/edit/Cod5menNABfeETTtah45?p=preview ):
<head>
<meta charset="UTF-8">
<title>Directive not working in select option</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
<script>
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope',
function($scope) {
$scope.customerId = 2;
$scope.customers = {
'1': {
name: 'Naomi',
address: '1600 Amphitheatre'
},
'2': {
name: 'Jim',
address: '1200 South'
}
};
}
])
.directive('myCustomer', function() {
return {
scope: {
cust: '='
},
template: '{{cust.name}}'
};
});
</script>
</head>
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<h3>Simple ng-repeat (Works)</h3>
<ul>
<li ng-repeat="(cid, cust) in customers"><span>Plain: {{cust.name}}</span> / Directive: <span my-customer cust="cust"></span>
</li>
</ul>
<h3>Select Options (Does not work)</h3>
<select ng-model="customerId">
<option ng-repeat="(cid, cust) in customers" value="{{cid}}" ng-selected="cid == customerId">
Plain: <span>{{cust.name}}</span> / Directive: <span my-customer cust="cust"></span>
</option>
</select>
<br/>{{customers[customerId].address}}
<br/>(<span my-customer cust="customers[customerId]"></span>)
</div>
</body>
</html>
BenCr's comment was right. It does not work because of the span. Thank you! If I use the directive directly on the option element, it does actually work:
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<h3>Simple ng-repeat</h3>
<ul>
<li ng-repeat="(cid, cust) in customers" my-customer cust="cust"></li>
</ul>
<h3>Select Options</h3>
<select ng-model="customerId">
<option ng-repeat="(cid, cust) in customers" value="{{cid}}" ng-selected="cid == customerId" my-customer cust="cust"></option>
</select>
<br/>{{customers[customerId].address}}
<br/>(<span my-customer cust="customers[customerId]"></span>)
</div>
</body>
New Plunker: http://plnkr.co/edit/Cod5menNABfeETTtah45?p=preview

angular.js two directives, second one does not execute

I have two directives defined in an angular.js module. The HTML element that is declared first executes its directive, but the second HTML element that uses the other directive does not execute it.
Given this HTML:
<div ng-app="myApp">
<div ng-controller="PlayersCtrl">
<div primary text="{{primaryText}}"/>
<div secondary text="{{secondaryText}}"/>
</div>
</div>
and this angular.js code:
var myApp = angular.module('myApp', []);
function PlayersCtrl($scope) {
$scope.primaryText = "Players";
$scope.secondaryText = "the best player list";
}
myApp.directive('primary', function(){
return {
scope: {
text: '#'
},
template: '<h1>{{text}}</h1>',
link: function(scope, element, attrs){
console.log('primary directive');
}
};
});
myApp.directive('secondary', function(){
return {
scope: {
text: '#'
},
template: '<h3>{{text}}</h3>',
link: function(scope, element, attrs){
console.log('secondary directive');
}
};
});
The resulting HTML is only the "primary" directive, and the "secondary" directive does not render:
<div ng-app="myApp" class="ng-scope">
<div ng-controller="PlayersCtrl" class="ng-scope">
<div primary="" text="Players" class="ng-isolate-scope ng-scope">
<h1 class="ng-binding">Players</h1>
</div>
</div>
</div>
The console output verifies this as well, as only the "primary directive" text is output.
Then if I switch the order of the primary and secondary elements, the secondary directive is executed and the primary directive is not:
<!-- reversed elements -->
<div secondary text="{{secondaryText}}"/>
<div primary text="{{primaryText}}"/>
<!-- renders this HTML (secondary, no primary) -->
<div ng-app="myApp" class="ng-scope">
<div ng-controller="PlayersCtrl" class="ng-scope">
<div secondary="" text="the best player list" class="ng-isolate-scope ng-scope">
<h3 class="ng-binding">the best player list</h3>
</div>
</div>
</div>
Why is this? What am I doing wrong?
div's are not void elements and require a closing tag.
<div ng-app="myApp">
<div ng-controller="PlayersCtrl">
<div primary text="{{primaryText}}"></div>
<div secondary text="{{secondaryText}}"></div>
</div>
</div>
Example

Categories