I have an angularjs accordion whose data is coming from json,but here its working fine but in my project accordion is not working.Is there any other way to do it.Below is my code.I am new to angularjs.Thanks in advance.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<script src="app.js"></script>
<style>
.test1{
background: #000;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<div ng-app="plunker" ng-controller="MainCtrl">
<div>
<div>
<div ng-repeat="test in items">
<div class="test1" ng-click="handleClick(test)">
{{test.title}}
</div><br>
<div class="test2" ng-show="selectedItem==test"> {{test.location}}</div><br>
</div>
</div>
</div>
</div>
app.js
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{
"title": "firstitem",
"location": "location1"
},
{
"title": "seconditem",
"location": "location2"
},
{
"title": "thirditem",
"location": "location3"
}
];
$scope.handleClick = function (test) {
$scope.selectedItem = test;
}
});
var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.items = [
{
title: 'firstitem',
location: 'location1'
},
{
title: 'seconditem',
location: 'location2'
},
{
title: 'thirditem',
location: 'location3'
}
];
});
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<div ng-controller="MainCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="{{test.title}}" ng-repeat="test in items">
{{test.location}}
</uib-accordion-group>
</div>
</body>
</html>
You can create Angularjs accordion using the following way easily.
HTML
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<div ng-controller="MainCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="{{test.title}}" ng-repeat="test in items">
{{test.location}}
</uib-accordion-group>
</div>
</body>
</html>
app.js
var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.items = [
{
title: 'firstitem',
location: 'location1'
},
{
title: 'seconditem',
location: 'location2'
},
{
title: 'thirditem',
location: 'location3'
}
];
});
Check my JSFiddle for more clarification.
Good Luck!
Related
using angular ui bootstrap I am creating modals with an ng repeat. I put a small example in a plunker.
https://plnkr.co/edit/lpaArn6ewYIbIMjHBb2s?p=preview
I am trying to figure out how to have the popovers open and close independently of one another now they all open and close at once.
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<div style=padding-top:200px;"></div>
<button ng-repeat = "item in [1,2,3]"
uib-popover-template="dynamicPopover.templateUrl"
popover-title="{{dynamicPopover.title}}"
popover-is-open="dynamicPopover.isOpen"
type="button"
class="btn btn-default">
Popover With Template
</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>{{dynamicPopover.content.header}}</div>
<button ng-click="dynamicPopover.isOpen = !dynamicPopover.isOpen">close</div>
</script>
</div>
</body>
</html>
js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
$scope.content = {
header: 'hello world'
};
$scope.dynamicPopover = {
content: $scope.content,
templateUrl: 'myPopoverTemplate.html',
title: 'Title',
isOpen: false
};
});
You are storing the state of each popover in a single property dynamicPopover.isOpen, but you have to store the state of each popover independently. Fro your example you can store it in isOpen: [] array:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
$scope.content = {
header: 'hello world'
};
$scope.dynamicPopover = {
content: $scope.content,
templateUrl: 'myPopoverTemplate.html',
title: 'Title',
isOpen: []
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<div style=padding-top:200px;"></div>
<button ng-repeat="item in [1,2,3]"
uib-popover-template="dynamicPopover.templateUrl"
popover-title="{{dynamicPopover.title}}"
popover-is-open="dynamicPopover.isOpen[$index]"
type="button"
class="btn btn-default">
Popover With Template
</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>{{dynamicPopover.content.header}}</div>
<button ng-click="dynamicPopover.isOpen[$index] = !dynamicPopover.isOpen[$index]">close</div>
</script>
</div>
</body>
</html>
I wants to catch parent name and id on child selection.
Output should be:
$scope.selected = [{"name": "Request1", "id":1,
"status":[{"name":"status1","isSelected":true},
{"name":"status2","isSelected":false}]
}]
Able to get selected child but respective parent not getting.
// Code goes here
var app = angular.module('demo', []);
app.controller('myController', function($scope){
$scope.requests=[{"name": "Request1", "id":1},
{"name": "Request2", "id":2},{"name": "Request3", "id":3}
];
$scope.statusList =[{ "name": "status1", "isSelected": true },
{ "name": "status2", "isSelected": false }
]
function initializeRequestStatus() {
angular.forEach($scope.requests, request => {
request.statusList = angular.copy($scope.statusList);
})
};
initializeRequestStatus();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='demo'>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<div class="container" ng-controller="myController">
<div>
<ul ng-repeat="request in requests">
{{request.name}}
<li>
<select class="form-control" ng-options="status as status.name for status in request.statusList" ng-model="request.selectedStatus" multiple></select>
</li>
</ul>
<ul>
<li ng-repeat="request in requests">{{request.selectedStatus}}</li>
</ul>
</div>
</div>
</body>
</html>
You can utilize the $index for getting the parent name and id.
// Code goes here
var app = angular.module('demo', []);
app.controller('myController', function($scope){
var result = [];
$scope.requests=[{"name": "Request1", "id":1},
{"name": "Request2", "id":2},{"name": "Request3", "id":3}
];
$scope.statusList =[{ "name": "status1", "isSelected": true },
{ "name": "status2", "isSelected": false }
];
$scope.getParent = function(index, selectedState){
result = [];
var req = {
"name": $scope.requests[index].name,
"id": $scope.requests[index].id,
"status": selectedState
}
result.push(req);
console.log("result",result);
return angular.toJson(result);
};
function initializeRequestStatus() {
angular.forEach($scope.requests, request => {
request.statusList = angular.copy($scope.statusList);
})
};
initializeRequestStatus();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='demo'>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<div class="container" ng-controller="myController">
<div>
<ul ng-repeat="request in requests">
{{request.name}}
<li>
<select class="form-control" ng-click="getParent($index, request.selectedStatus)" ng-options="status as status.name for status in request.statusList" ng-model="request.selectedStatus" multiple></select>
</li>
</ul>
<ul>
<li ng-repeat="request in requests">{{request.selectedStatus}}</li>
</ul>
</div>
</div>
</body>
</html>
in my main page i have a tabstrip which it's tab items loaded dynamically.but angularjs does not load related controller for tabitem.
my code is something like this:
var tabStripElement = $("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fade"
}
},
dataTextField: 'text',
dataContentField: 'content',
dataImageUrlField: 'dataImageUrl',
dataUrlField: 'url',
dataContentUrlField: 'contentUrl',
});
tabStripElement.parent().attr("id", "tabstrip-parent");
var tabStrip = tabStripElement.data("kendoTabStrip");
angular.module('myApp', []).controller('MainController', ['$scope', function($scope){
$scope.openTab()
{
tabStrip.append({
text: 'Title',
contentUrl: '/tabItem.html',
encoded: false
});
}
}])
.controller('TabController', ['$scope', function($scope){
}])
MainPage:
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<link href="~/Content/kendo/2016.1/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2016.1/kendo.default.min.css" rel="stylesheet" />
</head>
<body ng-controller="MainController">
<div id="tabstrip" class="text-right">
</div>
<script src="~/Scripts/lib/jquery/jquery-1.12.0.js"></script>
<script src="~/Scripts/lib/angular/angular.js"></script>
<script src="~/Scripts/lib/angular/angular-resource.js"></script>
<script src="~/Scripts/lib/kendo/2016.1/kendo.all.min.js"></script>
<script src="~/Scripts/js/app.js"></script>
<script src="~/Scripts/js/controllers.js"></script>
</body>
</html>
and view for tab is something like this:
<div ng-controller="TabController">
<input type="text" />
</div>
I have created here a working demoapp in which I have used the restangular
It is working perfectly fine but when I tired to implement the demoapp with the factory the data doesnt seem to come and I cant check out the possible bug in this
/* the file containing my json object*/
[
{"id":1,
"subject":"#aashima"
},
{"id":2,
"subject":"#aansh"
},
{"id":3,
"subject":"#artle"
},
{"id":4,
"subject":"#harish"
}
]
<!doctype html >
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Restangular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.min.js"></script>
</head>
<body>
<div ng-controller="IndexCtrl as omega" ng-cloak>
<ul>
<li ng-repeat="result in omega.people">
<span ng-bind="result.subject"></span>
</li>
</ul>
<span ng-bind="omega.harish"></span>
</div>
<script>
var app = angular.module('app', ['restangular'])
app.config(function(RestangularProvider) {
RestangularProvider.setBaseUrl("\js");
app.controller('IndexCtrl', function( testFactory) {
var self=this;
testFactory.getFriendList.then(function (homeFriends) {
self.people=homeFriends;
console.log(self.people);
});
});
app.factory('testFactory', ['Restangular', function (Restangular) {
return {
getFriendList: Restangular.all('emp.json').getList()
}
}]);
</script>
</body>
</html>
<!doctype html >
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Restangular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.min.js"></script>
</head>
<body>
<div ng-controller="IndexCtrl as omega" ng-cloak>
<ul>
<li ng-repeat="result in omega.people">
<span ng-bind="result.subject"></span>
</li>
</ul>
<span ng-bind="omega.harish"></span>
</div>
<script>
var app = angular.module('app', ['restangular'])
app.config(function(RestangularProvider) {
RestangularProvider.setBaseUrl("\js");
});
app.controller('IndexCtrl', function( Restangular, testFactory) {
var self=this;
Restangular.all('evm.json').getList().then(function(result) {
self.people = result;
});
testFactory.getFriendList.then(function (homeFriends) {
console.log(self.people);
self.people=homeFriends;
});
});
app.factory('testFactory', ['Restangular', function (Restangular) {
return {
getFriendList: Restangular.all('emp.json').getList()
}
}]);
</script>
Their is some syntax issue and I have corrected and now your App will run
Just started with Angular and trying to bind images.
This error shows up after page load in chrome.
'Uncaught Object - MINNER ASSET: 22
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/
angular.min.js"></script>
<script type="text/javascript">
function DemoController($scope) {
$scope.images = [
{ "src": "Images/1.jpg" },
{ "src": "Images/2.jpg" }
];
}
</script>
</head>
<body>
<div ng-app="DemoApp" ng-controller="DemoController">
<ul>
<li ng-repeat="image in images">
<img src="{{image.src}}" />
</li>
</ul>
</div>
</body>
Hi you miss var app = angular.module("DemoApp",[]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/
angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("DemoApp",[]);
app.controller("DemoController",
function DemoController($scope) {
$scope.images = [
{ "src": "Images/1.jpg" },
{ "src": "Images/2.jpg" }
];
});
</script>
</head>
<body>
<div ng-app="DemoApp" ng-controller="DemoController">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.src}}" />
</li>
</ul>
</div>
</body>
</html>
You haven't defined DemoApp, you can skip the app name.
<div ng-app ng-controller="DemoController">