I have created a demo at plnkr. I want to disable a particular tab say migration, I tried by writing disabled: true but it doesn't seem to work.
http://plnkr.co/edit/0XgquovKIICmgGcSVSef?p=preview
html code:
<!doctype html>
<div ng-app="TabsApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="punk.css" rel="stylesheet">
</head>
<body>
<div id="tabs" ng-controller="TabsCtrl">
<ul>
<li ng-repeat="tab in tabs"
ng-class="{active:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
</body>
</html>
Controller code :
angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
title: 'One',
url: 'coredcplan.html',
}, {
title: 'Two',
url: 'migration.html',
disabled: true,
}, {
title: 'Three',
url: 'schedule.html',
}];
$scope.currentTab = 'coredcplan.html';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
What you can do is give a property disabled, and check that on the tab click:
$scope.tabs = [{
title: 'One',
url: 'coredcplan.html'
}, {
title: 'Two',
url: 'migration.html',
disabled: true
}, {
title: 'Three',
url: 'schedule.html'
}];
$scope.onClickTab = function (tab) {
if(tab.disabled)
return;
$scope.currentTab = tab.url;
}
See this plunker
Related
I have a check box with a button.
When I click button checked, checkbox value should be pushed into an array. But it adds at the beginning of an array. I want to add checked checkbox value at the end of the array when clicking the button.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='test' ng-controller="Test">
<ul>
<li ng-repeat="album in albums">
<input type="checkbox" ng-model="album.selected" value={{album.name}} /> {{album.name}}
</li>
</ul>
<button type='button' ng-click="save()">Save</button><br>
<div ui-sortable="sortableOptionsList[0]" >
{{albumNameArray}}
</div>
<div ui-sortable="sortableOptionsList[0]">
<div class="app" ng-repeat="app in albumNameArray"> {{app.name}}</div>
</div>
</body>
</html>
<script>
angular.module('test', ['ui.sortable'])
.controller('Test', function($scope){
$scope.albums = [{
id: 1,
name: 'test1',
checked : false
},
{
id: 2,
name: 'test2',
checked : false
},
{
id: 3,
name: 'test3',
checked : false
}];
function createOptions (listName) {
console.log('outout');
var _listName = listName;
var options = {
placeholder: "app",
connectWith: ".apps-container",
helper: function(e, item) {
console.log("list " + _listName + ": helper");
return item;
}
};
return options;
}
$scope.sortableOptionsList = [createOptions('A'), createOptions('B')];
$scope.save = function(){
$scope.albumNameArray = [];
angular.forEach($scope.albums, function(album){
console.log(album.selected);
if(album.selected)
{
$scope.albumNameArray.push(album.name);
}
});
}
})
</script>
I have the perfect solution for your query. You just need to make a small change on the logic. Since you want to track the sequence on which the checkboxes are selected, i would suggest you the proper way in AngularJS, using ng-change on the checkbox.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='test' ng-controller="Test">
<ul>
<li ng-repeat="album in albums">
<input type="checkbox" ng-model="album.selected" value={{album.name}} ng-change='trackOrder(album)' /> {{album.name}}
</li>
</ul>
<button type='button' ng-click="save()">Save</button><br>
<div ui-sortable="sortableOptionsList[0]" >
{{albumNameArray}}
</div>
<div ui-sortable="sortableOptionsList[0]">
<div class="app" ng-repeat="app in albumNameArray"> {{app.name}}</div>
</div>
</body>
</html>
<script>
angular.module('test', ['ui.sortable'])
.controller('Test', function($scope){
$scope.albumArray = [];
$scope.albums = [{
id: 1,
name: 'test1',
checked : false
},
{
id: 2,
name: 'test2',
checked : false
},
{
id: 3,
name: 'test3',
checked : false
}];
function createOptions (listName) {
console.log('outout');
var _listName = listName;
var options = {
placeholder: "app",
connectWith: ".apps-container",
helper: function(e, item) {
console.log("list " + _listName + ": helper");
return item;
}
};
return options;
}
$scope.sortableOptionsList = [createOptions('A'), createOptions('B')];
$scope.trackOrder = function(album){
//add album in the array
if(album.selected){
$scope.albumArray.push(album.name);
}else{
//remove album fron the array
var index = $scope.albumArray.indexOf(album.name);
$scope.albumArray.splice(index,1);
}
}
$scope.save = function(){
//if you want the value on albumNameArray on click on save use this else you can
//use the $scope.albumArray directly
$scope.albumNameArray = angular.copy($scope.albumArray);
}
})
</script>
Here is the plunkr link PLUNKR
use unshift.
$scope.albumNameArray.unshift(album.name);
I have following code in my app:
<li ng-repeat="data in array">
<ul class="social-share">
<li>
<i class="fa fa-share-alt"></i>Share
<div id="myPopover" class="hide">
<strong>Social Share</strong>
<ul class="social-spacing">
<li><a class="btn btn-primary share-button" title="" data-original-title="" href="" ng-click="share(data.translation)">Facebook</a></li>
</ul>
</div>
</li>
</ul>
<p class="eng-translation">{{data.translation}}</p>
</li>
I'm using an angular directive to show the popover which contains social sharing options. Directive is as follows:
myApp.directive('popover', function() {
return function(scope, elem) {
elem.popover({
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});
}
});
All of the data in array displays properly as is supposed to be with ng-repeat. But, when I click on the Facebook share button, it only sends the first element of the array to the function "share".
If I don't use popover, it works fine.
Any help on this would be really kind.
Edit: Array object added
$scope.array = [
{
'translation': 'translation-1'
},
{
'translation': 'translation-2'
},
{
'translation': 'translation-3'
},
{
'translation': 'translation-4'
},
{
'translation': 'translation-5'
},
{
'translation': 'translation-6'
},
{
'translation': 'translation-7'
}
];
You can find the working version of your code below here. Are you missing to add ng-app="app" or ng-controller="myController" elements?
var myApp = angular.module('app', []);
myApp.controller('myController', ['$scope', function($scope) {
$scope.myArray = [
{
'translation': 'translation-1'
},
{
'translation': 'translation-2'
},
{
'translation': 'translation-3'
},
{
'translation': 'translation-4'
},
{
'translation': 'translation-5'
},
{
'translation': 'translation-6'
},
{
'translation': 'translation-7'
}
];
$scope.share = function($index) {
alert($scope.myArray[$index].translation);
};
}]);
myApp.directive('popover', function() {
return function(scope, elem) {
elem.popover({
container: 'body',
html: true,
content: function () {
var clone = elem.siblings('#myPopover').clone(true).removeClass('hide').css("display", "inherit");
return clone;
}
}).click(function(e) {
e.preventDefault();
});
}
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div ng-app="app">
<div ng-controller="myController">
<li ng-repeat="myData in myArray">
<ul class="social-share">
<li>
</i>Share
<div id="myPopover" class="hide">
<strong>Social Share</strong>
<ul class="social-spacing">
<li><a class="btn btn-primary share-button" title="" data-original-title="" href="" ng-click="share($index)">Facebook</a></li>
</ul>
</div>
</li>
</ul>
<p class="eng-translation">{{myData.translation}}</p>
</li>
</div>
</
</body>
</html>
I would like to use tabs to hide and show items in an ng-repeat. Is it possible to change the value of a scope like so?
<a ng-click="packageType = '1'">Package 1</a><a ng-click="packageType ='2'">Package 2</a><a ng-click="packageType = '3'">Package 3</a>
<div ng-repeat="item in packages" ng-show="packageType >=item.packageID">
{{item.name}}</div>
and the scope:
$scope.packages = [...{ "name": "some name",
"packageID": 1}...]
Where packageID can be 1, 2 or 3?
Here's the code that does exactly what your asking
Plunker
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div ng-controller="TabCtrl">
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.name}}" active="tab.active" select="onTabSelected(tab.slug)">
{{ tab.packageId }}
</tab>
</tabset>
</div>
<script type="text/javascript" charset="utf-8">
angular.module('app', ['ui.bootstrap']).config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
controller: 'MainCtrl'
}).when('/room/:id', {
controller: 'RoomCtrl',
}).when('/dashboard', {
controller: 'DashboardCtrl'
}).otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(false);
}]);
var TabCtrl = function($scope) {
$scope.tabs = [{
slug: 'dashboard',
name: "Package 1",
packageId: "some package #1"
}, {
slug: 'room-1',
name: "Package 2",
packageId: "some package #2"
}, {
slug: 'room-2',
name: "Package 3",
packageId: "some package #3"
}];
};
RoomCtrl = function($scope, $location) {
};
DashboardCtrl = function($scope, $location) {
};
MainCtrl = function($scope, $location) {
$scope.onTabSelected = function(tab) {
var route;
if (typeof tab === 'string') {
switch (tab) {
case 'dashboard':
route = tab;
break;
default:
route = 'rooms/' + tab;
break;
}
}
$location.path('/' + route);
};
};
</script>
</body>
</html>
I would write a function that encapsulates what you want to happen on click. That would make it easier to understand.
So I assume packages is an array and what you posted is not your complete code.
You will want to change your ng-show to say
ng-show="packageType == item.packageID"
this will only show the div if the packageID is the same as the package type. Your ng-click should work fine. You will want to set a default value for packageType somewhere in your controller however so something shows initially
You code has a few problems:
You first ng-click is does not have a closing quote.
<a ng-click="packageType = '1'>Package 1</a>
You set packageType to a string when it is a number later:
packageType ='2'
$scope.packages = { "name": "some name",
"packageID": 1}
You don't need {{}} in the ng-show
ng-show="packageType >={{item.packageID}}"
I think you meant for packages to be an array instead of an object:
$scope.packages = { "name": "some name",
"packageID": 1}
Example of how to do it is below. I set it to show on the second and third links :
(function() {
'use strict';
angular
.module('exampleApp', [])
.controller('ExampleController', ExampleController);
function ExampleController($scope) {
var vm = this;
$scope.packageType = 1;
$scope.packages = [{
"name": "some name1",
"packageID": 2
}, {
"name": "some name2",
"packageID": 2
}, {
"name": "some name3",
"packageID": 2
}, {
"name": "some name4",
"packageID": 3
}, {
"name": "some name5",
"packageID": 3
}, {
"name": "some nam6",
"packageID": 3
}];
}
ExampleController.$inject = ['$scope'];
})();
<!DOCTYPE html>
<html ng-app='exampleApp'>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>
<body ng-controller="ExampleController">
<a ng-click="packageType = 1">Package 1</a>
<a ng-click="packageType = 2">Package 2</a>
<a ng-click="packageType = 3">Package 3</a>
<p ng-repeat="item in packages" ng-show="packageType >= item.packageID">{{item.name}}
</p>
</body>
</html>
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="example.js"></script>
<script src="checklist-model.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DemoCtrl">
<label ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role.text}}
</label>
<button ng-click="user.roles=[];" style="margin-right: 10px">Uncheck all</button>
<button ng-click="checkNth(0)">Check first</button>
<button ng-click="checkAll()">Check all</button>
<pre>{{ user.roles | json }}</pre>
</div>
<script>
angular.module('plunker', ['checklist-model']);
var DemoCtrl = function($scope) {
$scope.roles = [{
id: 1,
text: 'guest'
}, {
id: 2,
text: 'user'
}, {
id: 3,
text: 'customer'
}, {
id: 4,
text: 'admin'
}];
$scope.user = {
roles: [$scope.roles[1]]
};
$scope.checkAll = function() {
// this first method doesn't work
//$scope.user.roles = $scope.roles;
// this one work
for (i = 0; i < $scope.roles.length; i++)
$scope.checkNth(i);
};
$scope.checkNth = function(i) {
console.log("first", JSON.stringify($scope.user.roles));
$scope.user.roles.splice(i, $scope.user.roles.length);
console.log("second", JSON.stringify($scope.user.roles));
$scope.user.roles.push($scope.roles[i])
console.log("third", JSON.stringify($scope.user.roles));
}
};
</script>
</body>
</html>
Here the checklist-model not woking as i expected.
im new to angular js help me.
is there any need to add CDN?.
Here is a plunk with the solution, I just made the work as a toggle for now. You can change that yourself if you want it to behave otherwise.
http://plnkr.co/edit/tm29BSwUoiFKUgytvnHE?p=preview
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-app="plunker" ng-controller="DemoCtrl">
<label ng-repeat="role in roles">
<input type="checkbox" ng-model="role.checked" ng-change="toggleUserRole(role)"> {{role.text}}
</label>
<button ng-click="uncheckAll();" style="margin-right: 10px">Uncheck all</button>
<button ng-click="checkNth(0)">Check first</button>
<button ng-click="checkAll()">Check all</button>
<pre>{{ user.roles | json }}</pre>
</div>
<script>
var app = angular.module('plunker',[]);
app.controller('DemoCtrl', function($scope) {
$scope.roles = [{
id: 1,
text: 'guest',
checked: false
}, {
id: 2,
text: 'user',
checked: false
}, {
id: 3,
text: 'customer',
checked: false
}, {
id: 4,
text: 'admin',
checked: false
}];
$scope.user = {
roles: []
};
$scope.toggleUserRole = function(role){
if($scope.user.roles.indexOf(role) == -1){
$scope.user.roles.push(role);
}
else{
$scope.user.roles.splice($scope.user.roles.indexOf(role),1);
}
};
$scope.checkAll = function() {
for (i = 0; i < $scope.roles.length; i++)
$scope.checkNth(i);
if($scope.user.roles.indexOf($scope.roles[i]) == -1){
$scope.user.roles.push($scope.roles[i]);
}
};
$scope.checkNth = function(i) {
$scope.roles[i].checked = !$scope.roles[i].checked;
$scope.toggleUserRole($scope.roles[i]);
}
$scope.uncheckAll = function() {
for (i = 0; i < $scope.roles.length; i++)
$scope.roles[i].checked = false;
$scope.user.roles = [];
};
});
</script>
</body>
</html>
facing problems with my directive that I've created. The directive seems to be executing, I know this as console.log() was called and some of the template was shown too however the part which didn't show up was the one with angular expression. Here's a sample:
my index.html:
<!DOCTYPE html>
<html ng-app="appModule" ng-controller="controller">
<head>
<title>this is the title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<ul>
<li>{{section.item1}}</li>
<li>{{section.item2}}</li>
<li>{{section.item3}}</li>
</ul>
<div ng-repeat='product in section.products_section.list_products'>
<directive data='product'></directive>
</div>
</body>
<script src="angularjs/app.js"></script>
</html>
my app.js:
angular.module('appModule', []).controller('controller', ['$scope', function($scope) {
$scope.section = {
item1: 'this is item1',
item2: 'this is item2',
item3: 'this is item3',
products_section: {
list_products: [
{
product_name: 'name 1'
}, {
product_name: 'name 2'
}, {
product_name: 'name 3'
}
] //end of list_products
}
};
}]).directive('directive', [function() {
return {
restrict: 'E',
scope: {
date: '='
},
templateUrl: 'angularjs/template.html',
replace: true,
controller: function($scope) {
console.log('this is controller in directive is called');
}
};
}]);
my template html:
<ul>
<li>{{product.product_name}}</li>
<li>this-is-to-show-this-is-being-executed</li>
</ul>
firefox console:
this is controller in directive is called
what it appears like in browser:
this is item1
this is item2
this is item3
this-is-to-show-this-is-being-executed
this-is-to-show-this-is-being-executed
this-is-to-show-this-is-being-executed
SORRY, Stackoverflow says that I need at least 10 rep to post images.
I see a couple things wrong.
scope: {
date: '='
}
Should be:
scope: {
data: '='
},
And your reference to the scope variable in the directive should be data. not product.
<ul>
<li>{{data.product_name}}</li>
<li>this-is-to-show-this-is-being-executed</li>
</ul>
This works.
app.js
angular.module('appModule', [])
.controller('controller', ['$scope', function($scope) {
$scope.section = {
item1: 'this is item1',
item2: 'this is item2',
item3: 'this is item3',
products_section: {
list_products: [
{
product_name: 'name 1'
}, {
product_name: 'name 2'
}, {
product_name: 'name 3'
}
] //end of list_products
}
};
}])
.directive('directive', [function(scope) {
return {
restrict: 'E',
templateUrl: 'template.html',
replace: true,
};
}]);
index.html
<!DOCTYPE html>
<html ng-app="appModule" ng-controller="controller">
<head>
<title>this is the title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<ul>
<li>{{section.item1}}</li>
<li>{{section.item2}}</li>
<li>{{section.item3}}</li>
</ul>
<ul>
<li>{{section.products_section.list_products[0].product_name}}</li>
<li>{{section.item2}}</li>
<li>{{section.item3}}</li>
</ul>
<div ng-repeat='product in section.products_section.list_products'>
<directive></directive>
</div>
<script src="app.js"></script>
</body>
</html>
Plunkr