I am getting the following error:
Error: [ng:areq] http://errors.angularjs.org/1.3.2/ng/areq?p0=NavigationController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://localhost:59838/bundles/angular?v=eGVVmShKFZLix9VnkpB8psikEOhD8WAVwpsLlHRCbyE1:6:416
at Nb (http://localhost:59838/bundles/angular?v=eGVVmShKFZLix9VnkpB8psikEOhD8WAVwpsLlHRCbyE1:19:417)
at ob (http://localhost:59838/bundles/angular?v=eGVVmShKFZLix9VnkpB8psikEOhD8WAVwpsLlHRCbyE1:20:1)
at http://localhost:59838/bundles/angular?v=eGVVmShKFZLix9VnkpB8psikEOhD8WAVwpsLlHRCbyE1:75:177
at http://localhost:59838/bundles/angular?v=eGVVmShKFZLix9VnkpB8psikEOhD8WAVwpsLlHRCbyE1:57:112
at r (http://localhost:59838/bundles/angular?v=eGVVmShKFZLix9VnkpB8psikEOhD8WAVwpsLlHRCbyE1:7:408)
at I (http://localhost:59838/bundles/angular?v=eGVVmShKFZLix9VnkpB8psikEOhD8WAVwpsLlHRCbyE1:56:496)
at g (http://localhost:59838/bundles/angular?v=eGVVmShKFZLix9VnkpB8psikEOhD8WAVwpsLlHRCbyE1:51:299)
at g (http://localhost:59838/bundles/angular?v=eGVVmShKFZLix9VnkpB8psikEOhD8WAVwpsLlHRCbyE1:51:316)
Here is my app.js:
(function () {
'use strict';
var app = angular.module('app', ['navigation']);
})();
here is the navigation controller:
function() {
var navigation = angular.module('navigation', []);
navigation.controller('NavigationController', function () {
this.tabs = [
{ title: 'First Tab', content: 'Controllers\FirstTab' },
];
});
})();
And here is the partial view that renders this: (It is currently not getting here)
<div ng-controller="NavigationController as nav">
<ul class="nav nav-pills">
<li ng-repeat="tab in nav.tabs">{{tab.title}}</li>
</ul>
</div>
To me (a noob in angular) everything looks good. What am I missing?
UPDATE:
Fiddle
You can check this:
var navigation = angular.module('navigation', []);
var app = angular.module('myApp', ['navigation']);
navigation.controller('NavigationController', function ($scope) {
$scope.tabs = [
{ title: 'First Tab', content: 'Controllers\FirstTab' },
{ title: 'Second Tab', content: 'Controllers\SecondTab' },
{ title: 'Third Tab', content: 'Controllers\ThirdTab' },
{ title: 'Fourth Tab', content: 'Controllers\FourthTab' },
{ title: 'Fifth Tab', content: 'Controllers\FifthTab' },
{ title: 'Sixth Tab', content: 'Controllers\SixthTab' },
{ title: 'Seventh Tab', content: 'Controllers\SeventhTab' }
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="NavigationController as nav">
<div ng-repeat="tab in tabs">
<b> {{ tab.title}} </b> {{ tab.content}}
</div>
</div>
</div>
Related
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?
My problem is this: in the main page I have an ng-repeat of items as links, but they don't redirect correctly. Please be gentle, I'm learning AngularJS and what I found in the official documentation didn't help me, I hope you will.
page.html
<div class="container">
<div class="row">
<div class="col-xs-12" ng-controller="PageCtrl as ctrl">
<div ng-repeat="featured in ctrl.featured" class="text-centered">
<h1>{{featured.titolo}}
<small>{{featured.sottotitolo}}</small>
</h1>
<a ng-href="{{featured.id}}" class="thumbnail">
<img class="img-responsive" alt="{{featured.etichetta}}" src="http://placehold.it/1518x1000" />
</a>
</div>
</div>
</div>
<br>
<br>
</div>
page.js
angular.module('myApp')
.controller('PageCtrl', function () {
this.featured = [
{
id: '#/products/item',
titolo: 'some text',
sottotitolo: 'some text',
etichetta: "some text"
},
{
id: '#/products/item',
titolo: 'some text',
sottotitolo: 'some text',
etichetta: "some text"
},
{
id: '#/products/item',
titolo: 'some text',
sottotitolo: 'some text',
etichetta: "some text"
}
];
});
app.js
app.config(function ($routeProvider) {
$routeProvider
.when(':productId', {
templateUrl: 'views/products/:productId.html',
controller: 'ItemCtrl',
controllerAs: 'productId'
})
});
/controllers/item.js
angular.module('myApp')
.controller('ItemCtrl', function ($routeParams) {
var self = this;
self.productId = $routeParams.productId;
});
I am trying to create a custom filter , but despite following the correct structure I think something is wrong.
angular.module('App', [])
.filter("htmlToPlaintext", function() {
return function(text) {
return String(text).replace(/<[^>]+>/gm, '');
}
})
.controller ('mainCtrl',['$scope','$filter', function($scope,$filter){
$scope.items=[
{id: '1', title: '<b>Chicago</b>'},
{id: '2', title: '<b><i>New York</i></b>'},
{id: '3', title: '<div><p>Washington</p></div>'}
];
};
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<div ng-app="App">
<div ng-controller="mainCtrl">
<div ng-repeat="item in items">
{{item.title | htmlToPlainText}}
</div>
</div>
</div>
Ideally you should declare your filter within it's own module and then inject it into the App module. But you can attach the filter to the App module directly. Below is a working example:
angular.module('App', [])
.filter("htmlToPlaintext", function() {
return function(input) {
return input.replace(/<[^>]+>/gm, '');
}
})
.controller('mainCtrl', ['$scope',
function($scope) {
$scope.items = [{
id: '1',
title: '<b>Chicago</b>'
}, {
id: '2',
title: '<b><i>New York</i></b>'
}, {
id: '3',
title: '<div><p>Washington</p></div>'
}];
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App">
<div ng-controller="mainCtrl">
<div ng-repeat="item in items">
{{item.title | htmlToPlaintext}}
</div>
</div>
</div>
You don't need to use $filter as you are using HTML Template Binding.
Extracting text from HTML via Regexps it not good idea. Especially if you encounter with something weird, like this html
<span>2 < 3<span>
Your filter gives you 2, but actually here should be 2 < 3.
If you want to manage all possible cases properly, you should use some DOM-API:
.filter("htmlToPlaintext", function() {
return function(text) {
var div = document.createElement("div");
div.innerHTML = html;
return div.textContent || "";
}
})
Look at this answer for similar question to know more.
I try to do TODO list using Angular.js
I have function addTask, but it dosen't work. I try to give it project and than get array of tasks. In Chrome I see this mistake "Cannot read property 'tasks' of undefined"
This is my app.js
var app = angular.module('toDoList', ['ngDialog']);
app.controller('MainCtrl', [
'$scope',
'$rootScope',
'ngDialog',
function($scope, $rootScope, ngDialog){
$scope.test = 'Hello world!';
$scope.projects = [
{id: '1', title: 'For Home', tasks: [ {title: 'task 1', done:false }, {title: 'task 2', done: false }]},
{id: '2', title: 'For Work', tasks: [ {title: 'task 1', done:false }, {title: 'task 2', done: false }]}
];
$scope.addProject = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.projects.push({
title: $scope.title
});
};
$scope.addTask = function(project){
$scope.project.tasks.push({
title: $scope.tasktitle, done: false
});
}]);
This is my html code
<body ng-app="toDoList" ng-controller="MainCtrl">
<div class="project" ng-repeat="project in projects">
<span class="title">{{project.title}}</span>
<form name="frm" ng-submit="addTask(project)">
<input
type="text"
class="form-control"
placeholder="Start to type task"
ng-model="tasktitle">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Add Task</button>
</span>
</form>
<ul class="todo-list">
<li ng-repeat="task in project.tasks">
<input type="checkbox" ng-model="task.done">
<span ng-class="{done:task.done}">{{task.title}}</span>
</li>
</ul>
</div>
</body>
How can I push my data about task?
This is doesn't work:
$scope.addTask = function(project){
$scope.project.tasks.push({
title: $scope.tasktitle, done: false
});
};
First and foremost, you're missing an 's' in $scope.project.tasks.push. It should be projects, so as to match up with the scope variable.
Second, you're not actually choosing a project to push to. $scope.projects is an Array. You would need to choose an index to push to. Here's what I think you're going for:
HTML
<form name="frm" ng-submit="addTask(project.id, tasktitle)">
Javascript
$scope.addTask = function(id, task){
$scope.projects[id].tasks.push({
title: task
, done: false
});
};
EDIT: Working codepen at: codepen.io/Pangolin-/pen/YPVwye – Pangolin
I could fix this, but i don't know is it right?
HTML
<form name="frm" ng-submit="addTask(project.tasks, tasktitle)" class="input-group">
Javascript
$scope.addTask = function(project, value){
project.push({
title: value
});
I want to open a Pop Up window on the click of a link on a Kendo Grid column. The Pop window should contain the detailed data of the current row. Something like given in http://demos.telerik.com/kendo-ui/grid/custom-command link. But I want this to work on click of a link of an existing column rather than a new custom button.
HTML:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div id="grid" kendo-grid k-options="kendoGrid"></div>
</div>
</div>
Controller:
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', function ($scope, myService) {
$scope.kendoGrid = myService.getKGrid();
});
Service:
myApp.service('myService', function () {
this.getKGrid = function () {
var kGrid = {
dataSource: [{"Col1":"Val1","Col2":"Val2"}],
columns: [{
field: "Col1",
title: "Col1"
},
{
field: "Col2",
title: "Col2",
template: "<a href='\\#' class='link' **ng-click='TBD(Open Pop-up window with row details)'**>#=Col2#</a>"
}
]
};
return kGrid;
};
});
Please guide how to achieve this.
Thanks in Advance.
I am able to display the pop up kendo window with row details by making below changes.
HTML:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div id="grid" kendo-grid k-options="kendoGrid"></div>
<div id="details"></div>
<div id="detailsTemplate" style="display: none;">
<div class="row">
<text>Data :</text> <text>#=Col1#</text><!--We can add more data here-->
</div>
</div>
</div>
</div>
Controller:
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', function ($scope, myService) {
$scope.kendoGrid = myService.getKGrid();
$scope.showDetails = function (dataItem) {
myService.showWindow(dataItem);
}
});
Service:
myApp.service('myService', function () {
this.showWindow function () {
var window = angular.element(details)
.kendoWindow({
title: "Details",
modal: true,
visible: false,
resizable: false,
width: 600
}).data("kendoWindow");
var detailsTemplate = kendo.template(angular.element(detailsTemplate).html());
window.content(detailsTemplate(dataItem));
window.center().open();
};
this.getKGrid = function () {
var kGrid = {
dataSource: [{"Col1":"Val1","Col2":"Val2"}],
columns: [{
field: "Col1",
title: "Col1"
},
{
field: "Col2",
title: "Col2",
template: "<a href='\\#' class='link' ng-click='showDetails(dataItem)'>#=Col2#</a>"
}
]
};
return kGrid;
};
});