I am trying to implement tab inside tab view in AngularJS by using angularstrap 2.1.0.
There are n main tab like "Tab1", "Tab2", "Tab3", ..."Tabn" and each tab can have m subtabs like "Subtab1", "Subtab2", ..."Subtabm".
HTML
<div ng-controller="myController">
<div bs-active-pane="activeTab" bs-tabs="true">
<div ng-repeat="tab in tabs" data-title="{{ tab.title }}" bs-pane="true">
<div>Hello, tab : {{tab.title}}</div>
<div bs-active-pane="tab.activeSubTab" bs-tabs="true">
<div ng-repeat="subTab in tab.subtabs" data-title="{{ subTab.title }}" bs-pane="true">
</div>
</div>
</div>
</div>
</div>
JS
var app = angular.module('myApp', ['mgcrea.ngStrap']);
app.controller('myController', ['$scope', function(scope) {
scope.tabs = [{
title: 'Home',
}, {
title: 'Profile',
}, {
title: 'About',
}];
scope.activeTab = 0;
for (var index in scope.tabs) {
var subtabs = [{
title: 'sub1',
}, {
title: 'sub2',
}, {
title: 'sub3',
}];
scope.tabs[index].subtabs = subtabs;
scope.tabs[index].activeSubTab = 0;
}
}]);
JsFiddle
I tried to implement but it is giving error
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: $pane in $panes, Duplicate key: object:01E
Does angularstrap tab support this kind of view? If not how should I implement this?
Related
Im repeating objects of JSON using NG-Repeat. How do I include html, such as a link, in here:
{id: "53", description: "here is a <a href = '#/detail/'>Link</a> to something", additional: ["2.jpg", "3.jpg" ]}
You need to use $sce to trust the HTML. I like to create a filter and use ng-bind-html on a <span> tag. Using a filter makes it super simple to show HTML wherever you need. Here is a simple example.
angular.module('app', [])
.filter('unsafe', ($sce) => {
return function(value) {
return $sce.trustAsHtml(value);
}
})
.controller('ctrl', ($scope) => {
$scope.items = [{
id: "53",
description: "here is a <a href = '#/detail/'>Link</a> to something",
additional: ["2.jpg", "3.jpg"]
},
{
id: "54",
description: "here is another <a href = '#/detail/'>Link</a> to something",
additional: ["4.jpg", "5.jpg"]
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<ul>
<li ng-repeat="item in items"><span ng-bind-html="item.description | unsafe"></span></li>
</ul>
</div>
I have the following in my controller:
var myApp = angular.module("myApp", []);
myApp.controller("TestCtrl", ['$scope', function($scope) {
$scope.rows = [
'Facebook',
'Twitter',
'Pinterest',
'Instagram',
'Tumblr',
'Google'
];
}]);
and I'm trying to show the content like this
<div class="container">
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<label ng-repeat="row in rows">
<input type="checkbox" ng-checked="row.selected" ng-model="row.selected" />{{row}}</label>
</div>
</div>
right now the items show, but I can't check the checkboxes,
check this Plunker
In order to have your checkbox checkable, you need to pass a valid ng-model there. In your case, row.selected is invalid since every row is a string and not object.
You can have your $scope.rows array like this instead:
$scope.rows = [{
name: 'Facebook',
selected: false
}, {
name: 'Twitter',
selected: false
}, {
name: 'Pinterest',
selected: false
}, {
name: 'Instagram',
selected: false
}, {
name: 'Tumblr',
selected: false
}];
Here's a forked plunker which has checkboxes checkable
I have a variable set to true in ng-click but the div underneath is not displaying. I've followed this post but it looks like it doesnt work in maybe ng-repeat? Here's the plunker: http://plnkr.co/edit/90G1KAx9Fmf2SgRs5gYK?p=preview
angular.module('myAppApp', [])
.controller('MainCtrl', function ($scope) {
$scope.notes = [{
id: 1,
label: 'First Note',
done: false,
someRandom: 31431
}, {
id: 2,
label: 'Second Note',
done: false
}, {
id: 3,
label: 'Finished Third Note',
done: true
}];
$scope.reach= function (id) {
//the assignment below works
//$scope.flag = true;
alert("hello there");
};
});
<div ng-app="myAppApp">
<div ng-controller="MainCtrl">
<div ng-repeat="note in notes">
{{note.id}} - {{note.label}} -
click me
</div>
<div class="row" id="" ng-show="flag">I'm Here</div>
</div>
</div>
It should be ng-click="$parent.flag = true;reach(111);"
click me
Outside ng-repeat
You question is unclear, you could use ng-repeat inside ng-repeat, by maintaining variable in ng-repeat parent scope. and access parent scope using $parent. annotation inside ng-repeat
<div ng-repeat="note in notes">
{{note.id}} - {{note.label}} -
click me
<div class="row" id="" ng-show="$parent.selected == note.id">I'm Here</div>
</div>
</div>
Inside ng-repeat
I would advise you to use ng-init
<div ng-repeat="note in notes" ng-init="parent=$parent">
and after that
click me
Please see demo below
angular.module('myAppApp', [])
.controller('MainCtrl', function($scope) {
$scope.notes = [{
id: 1,
label: 'First Note',
done: false,
someRandom: 31431
}, {
id: 2,
label: 'Second Note',
done: false
}, {
id: 3,
label: 'Finished Third Note',
done: true
}];
$scope.reach = function(id) {
//$scope.flag = true;
alert("hello there");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myAppApp">
<div ng-controller="MainCtrl">
<div ng-repeat="note in notes" ng-init="parent=$parent">
{{note.id}} - {{note.label}} -
click me
</div>
<div class="row" id="" ng-show="flag">I'm Here</div>
</div>
</div>
</body>
I need to call a js function when an ng-repeat template is created:
<div ng-repeat="item in items">
<input id="ip{{item.id}}">
<script>$(function () { $('#ip{{item.id}}').kendoDatePicker(); });</script>
</div>
The id is replaced as expected, but angular doesn't seem to work inside script tags.
That is correct, Angular will not evaluate expressions in script tags. You will need to use a directive that will initialize the Kendo plugin for each element.
The good news is Kendo already has a module for integrating with Angular, so you might as well just use that. Here is a plunk I put together showing it in a repeater.
<div ng-repeat="item in items">
<label for="{{item.id}}">{{item.id}}</label>
<div>
<input kendo-date-picker ng-model="item.value" />
</div>
</div>
Controller:
angular.module("demo", ['kendo.directives'])
.controller('DemoCtrl', ['$scope',
function($scope) {
$scope.items = [{
id: 'item1',
value: null
}, {
id: 'item2',
value: null
}, {
id: 'item3',
value: null
}, {
id: 'item4',
value: null
}];
}
]);
I want to create closeable tabs (like chrome tab or firefox tab, which has a small "x" on every tab). How to configure the ready-made tab component in UI-Bootstrap to add this functionality?
Thanks.
you can use html & ng-click in your tab-heading, e.g.
<div ng-controller="mainCtrl">
<tabset>
<tab ng-repeat="t in tabs">
<tab-heading>{{t.title}} <a ng-click="removeTab($index)" href=''><i class="icon-remove"></i></a></tab-heading>
<div ng-bind-html-unsafe='t.content'></div>
</tab>
</tabset>
</div>
angular.module('myApp', ['ui.bootstrap']).controller("mainCtrl", function ($scope) {
$scope.tabs = [{
title: "one",
content: '<h1>tab one</h1>'
}, {
title: "two",
content: '<h1>tab two</h1>'
}, {
title: "three",
content: '<h1>tab three</h1>'
}];
$scope.removeTab = function (index) {
$scope.tabs.splice(index, 1);
};
});
JSFiddle: http://jsfiddle.net/alfrescian/ZE9cE/