I am trying to create a single modal that pulls dynamic data from an ng-repeat (work in workList) in AngularJS. In other words, the modal does not live within the ng-repeat in order to prevent multiple modals from generating when I can just add dynamic content to one modal. Here's my view:
<div ng-controller="mainController">
<div ng-repeat="work in workList"
//some other code here...
<div ng-controller="modalController">
<button ng-click="open_modal(work)" data-toggle="modal" data-target="#myModal">
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<h2>
{{ timechosen.data.name }}
</h2>
</div>
</div>
Here's my modalController:
angular
.module('testApp')
.controller('modalController', ['$scope', function($scope) {
$scope.open_modal = function(time_chosen) {
$scope.timechosen = time_chosen.data;
}
}])
In my modal, {{ timechosen.data.name }} does not display anything and I'm pretty sure it's a nesting scope issue because when I set $scope.timechosen in my mainController, it seems to work fine. However, I do need to set $scope.timechosen in the modalController but can't seem to find a way around the possible nested scope issue. Any ideas?
Have you thought about putting everything inside a single controller? Like this:
angular
.module('app', [])
.controller('TestController', function($scope) {
$scope.items = [
{
label: 'Item 1',
body: 'This is the body of item 1',
title: 'This is number 1'
},
{
label: 'Item 2',
body: 'This is the body of item 2',
title: 'This is number 2'
},
{
label: 'Item 3',
body: 'This is the body of item 3',
title: 'This is number 3'
}
]
$scope.changeModalInfo = function(info) {
$scope.info = info;
}
});
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="TestController as ctrl">
<ul>
<li ng-repeat="item in items">
<button data-toggle="modal" data-target="#myModal"
ng-click="changeModalInfo(item)">
{{item.label}}
</button>
</li>
</ul>
<div class="modal fade"
id="myModal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">{{info.title}}</h4>
</div>
<div class="modal-body">
<p>{{info.body}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div>
</div>
</div>
</body>
</html>
If you need to break into more than one controller, you can use services or $rootScope (not advised).
angular
.module('app', [])
.controller('ModalController', function($scope, ModalService) {
$scope.modal = ModalService;
})
.controller('TestController', function($scope, ModalService) {
$scope.items = [
{
label: 'Item 1',
body: 'This is the body of item 1',
title: 'This is number 1'
},
{
label: 'Item 2',
body: 'This is the body of item 2',
title: 'This is number 2'
},
{
label: 'Item 3',
body: 'This is the body of item 3',
title: 'This is number 3'
}
]
$scope.changeModalInfo = function(info) {
ModalService.info = info;
}
})
.service('ModalService', function() {
return {};
});
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="TestController as ctrl">
<ul>
<li ng-repeat="item in items">
<button data-toggle="modal" data-target="#myModal"
ng-click="changeModalInfo(item)">
{{item.label}}
</button>
</li>
</ul>
</div>
<div class="modal fade"
id="myModal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
ng-controller="ModalController as ctrl">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">{{modal.info.title}}</h4>
</div>
<div class="modal-body">
<p>{{modal.info.body}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div>
</div>
</body>
</html>
Related
Here is my code:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body ng-controller="HomeController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-apple" style="color: #5bdb46">
</span> {{appTitle}}
</a>
</div>
</div>
</nav>
<div class="container" ng-view>
</div>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
var app = angular.module('groceryListApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/groceryList.html",
controller: "GroceryListItemsController"
})
.when("/addItem",{
templateUrl: "views/addItem.html",
controller: "GroceryListItemsController"
})
// .otherwise({
// redirectTo: "/"
//})
});
app.controller("HomeController", ["$scope", function($scope) {
$scope.appTitle = "Grocery List";
}]);
app.controller("GroceryListItemsController", ["$scope", function($scope) {
$scope.groceryItems = [{
completed: true,
itemName: 'milk',
date: '2017-10-01'
},
{
completed: true,
itemName: 'cookies',
date: '2017-10-02'
},
{
completed: true,
itemName: 'ice cream',
date: '2017-10-03'
},
{
completed: true,
itemName: 'potatoes',
date: '2017-10-04'
},
{
completed: true,
itemName: 'cereal',
date: '2017-10-05'
},
{
completed: true,
itemName: 'bread',
date: '2017-10-06'
},
{
completed: true,
itemName: 'eggs',
date: '2017-10-07'
},
{
completed: true,
itemName: 'tortillas',
date: '2017-10-08'
}
]
}]);
groceryList.html
<div class="col-xs-12">
<a href="#/addItem" style="margin-bottom: 10px:" class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a>
<ul class="list-group">
<li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix">
<span style="font-weight: bold">{{item.itemName | uppercase}}</span>
</li>
</ul>
</div>
addItem.html
<div class="col-xs-12">
<div class="jumbotron text-center">
<h1>Add Item Below</h1>
</div>
<form name="groceryForm">
<div class="form-group">
<input type="text" class="form-control" placeholder ="Grocery Item">
</div>
<div class="form-group">
<a href="#/" class="btn btn-success btn lg btn-block">
<span class="glyphicon glyphicon-pushpin"></span>
Save
</a>
</div>
<div class="form-group">
<a href="#/" class="btn btn-default btn lg btn-block">
<span class="glyphicon glyphicon-remove"></span>
Cancel
</a>
</div>
</form>
</div>
The output is showing the Add Grocery Item button along with the grocery items. However when clicking the add grocery item button ,its not redirecting to any page. This is an extension to Angular Module Routing not working
Thanks for you help.
I ran your code locally and the problem seems to be related to route's hashPrefix.
It seems that the default prefix is #!/, so your URLs should start with it:
<a href="#!/addItem" ...>
<a href="#!/" ...>
Instead of:
<a href="#/addItem" ...>
<a href="#/" ...>
This will require that you change every herf in the website. Though the more elegant solution would be to get rid of the ! mark all together using:
app.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider...
// Register routes...
});
This will change the default prefix and make it #/ instead of #!/.
By doing so, all your website URLs will work without the need to change anything else.
I have list of stories with images , content and title in ng-repeat.
When I click on particular story , I need a bootstrap model to open and values to be displayed . I am doing it by calling a function showStories(); But I couldnt do it . I am getting empty value since its globally declared as
$scope.selectedStoryPreview = "";
$scope.selectedStoryContent = "";
$scope.selectedStoryTitle = "";
Html :
<div class="image" ng-repeat="item in filteredStories track by $index">
<img ng-src="{{item.images}}" style="cursor: pointer;" ng-click="showStories(item)" data-toggle="modal" data-target="#storyPreview">
<button><span>{{item.title}}</span>
</button>
</div>
JS:
$scope.showStories = function(item) {
$scope.selectedStoryPreview = item.images;
$scope.selectedStoryContent = item.content;
$scope.selectedStoryTitle = item.title;
}
Modal :
<div class="modal fade" id="storyPreview" role="dialog" data-keyboard="false" data-backdrop="static" style="padding-top: 8em;">
<div class="modal-dialog">
<div class="modal-content" style="text-align: center;">
<div class="modal-header imagemodalhead">
<h4>{{selectedStoryTitle}}</h4>
<a class="edit" ng-click="openmanageprofile()"><img src="css/images/edit.png">
</a>
</div>
<div class="modal-body" style="background: #eee;">
<div class="row">
<img class="file-imageStory" ng-src="{{selectedStoryPreview}}" />
</div>
<br>
<div class="row">
<div class=" col-sm-12 storyPrv">
<span class="styletheStory">{{selectedStoryContent}}</span>
</div>
</div>
<div class="modal-footer imagefooter">
<button type="button" class="button share" ng-click="closePreview()" style="background-color: #7B7D7D; color: black;">close</button>
</div>
</div>
$scope.model is undefined. Set it as $scope.model = {} This way
you can dynamically add properties to it at compile time.
Moreover, you could use data-toggle="modal"
data-target="#viewdetails" as the action event to point to correct
modal.
Also, no need to pass individual properties as arguments in the
method showStories(item), you could send out complete object and
obtain its properties.
DEMO:
Click on the image to open modal.
function MyCtrl($scope) {
$scope.filteredStories = [{
id: 1,
images: 'sample1.png',
title: "sample1",
content: "content here..."
}, {
id: 2,
images: 'sample2.png',
title: "sample2",
content: "content here..."
}, {
id: 3,
images: 'sample3.png',
title: "sample3",
content: "content here..."
}, {
id: 4,
images: 'sample4.png',
title: "sample4",
content: "content here..."
}]
$scope.showStories = function(item) {
$scope.selectedStoryPreview = item.images;
$scope.selectedStoryContent = item.content;
$scope.selectedStoryTitle = item.title;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body ng-app ng-controller="MyCtrl">
<div class="image" ng-repeat="item in filteredStories track by $index">
<img ng-src="{{item.images}}" style="cursor: pointer;" ng-click="showStories(item)" data-toggle="modal" data-target="#storypreview">
<button><span>{{item.title}}</span>
</button>
</div>
<div class="modal fade" id="storypreview" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="text-align: center;">
<div class="modal-header imagemodalhead">
<h4>{{selectedStoryTitle}}</h4>
<a class="edit" ng-click="openmanageprofile()"><img src="css/images/edit.png">
</a>
</div>
<div class="modal-body" style="background: #eee;">
<div class="row">
<img class="file-imageStory" ng-src="{{selectedStoryPreview}}" />
</div>
<br>
<div class="row">
<div class=" col-sm-12 storyPrv">
<span class="styletheStory">{{selectedStoryContent}}</span>
</div>
</div>
<div class="modal-footer imagefooter">
<button type="button" class="button share" ng-click="closePreview()" style="background-color: #7B7D7D; color: black;" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
</div>
</body>
If modal controller is different. Then send the value using resolve method. If the controller is same. Then I think it should display the values.
And provide the id of modal here :
<div class="modal-content" id="storyPreview" style="text-align: center;">
I have this code that fetches data from db every 1 second:
app.controller("rfController", ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
$scope.displayData = function () {
$http.get('db.php').success(function(data) {
$scope.refreshes = data;
console.log(data);
});
$timeout(function() {
$scope.displayData();
},1000)
};
}]);
But the problem is that I have some buttons that open up bootstrap modals to look into these data. When I open the modal, it keeps closing because the displayData() function keeps refreshing. Here is the html for modal:
<div class="col-md-4 text-right">
<button class="btn rf-btn" id="clicked" data-toggle="modal" data-target="#rfmodal{{$index}}">More</button> <!-- OPENS MODAL -->
<!-- MODAL -->
<div class="modal small fade" tabindex="-1" role="dialog" id="rfmodal{{$index}}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"
ng-class="{'bg-success': refresh.status === 'Successful',
'bg-fail': refresh.status === 'Failed',
'bg-delay': refresh.status === 'Delayed'}">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center">{{refresh.company}}</h4>
</div>
<div class="modal-body text-left">
<p class="detail-text"><b>Status</b>: {{refresh.status}}</p>
<p class="detail-text"><b>TimeStamp</b>: {{refresh.dt}}</p>
<p class="detail-text"><b>OrgID</b>: {{refresh.orgid}}</p>
<p class="detail-text"><b>Body</b>: {{refresh.body}}</p>
</div>
<div class="modal-footer">
<button type="button rf-btn" class="btn rf-btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Any ideas?
In controller your variable name is $scope.refreshes.
In html you are fetching data from "refresh" .Could be a problem??
Also $timeout delays the execution of the function, it won't repeatedly call the displaydata function every 1 second.It will only call it once after a second.
You should use $interval instead.
Try This. This will stop the interval when modal is open.
And you have to use setInterval to call the function repeatedly ,
$timeout only executes once after given time.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="rfController">
<div class="col-md-4 text-right">
<button class="btn rf-btn" id="clicked" ng-click="runInterval = false" data-toggle="modal" data-target="#rfmodal{{$index}}" data-backdrop="static" data-keyboard="false">More</button> <!-- OPENS MODAL -->
<!-- MODAL -->
<div class="modal small fade" tabindex="-1" role="dialog" id="rfmodal{{$index}}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"
ng-class="{'bg-success': refresh.status === 'Successful',
'bg-fail': refresh.status === 'Failed',
'bg-delay': refresh.status === 'Delayed'}">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center">{{refresh.company}}</h4>
</div>
<div class="modal-body text-left">
<p class="detail-text"><b>Status</b>: {{refresh.status}}</p>
<p class="detail-text"><b>TimeStamp</b>: {{refresh.dt}}</p>
<p class="detail-text"><b>OrgID</b>: {{refresh.orgid}}</p>
<p class="detail-text"><b>Body</b>: {{refresh.body}}</p>
</div>
<div class="modal-footer">
<button type="button rf-btn" class="btn rf-btn" data-dismiss="modal" ng-click="runInterval = true">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("rfController", ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
$scope.runInterval = true;
$scope.displayData = function () {
$http.get('http://localhost').success(function(data) {
$scope.refreshes = data;
console.log(data);
});
console.log("displayData");
};
setInterval(function() {
if($scope.runInterval){
$scope.displayData();
console.log("Done");
}
},1000)
}]);
</script>
</body>
</html>
So I have the following simple JSON in my controller:
var app = angular.module('MyApp', []);
app.controller('loadCtrl', function($scope,$http) {
$scope.buttons=[
{Id:'1', type:'First Button'
},
{Id:'2', type:'2nd Button'
},
{Id:'3', type:'3rd Button'
}
];
});
In my view, I have buttons generated by ng-repeat, and modals attached to each button:
<div ng-app="MyApp" ng-controller="loadCtrl" class="container">
<div ng-repeat="button in buttons" class="btn-group">
<div class="btn btn-sq-lg btn-primary" data-toggle="modal" ng-attr-data-target="{{button.type+'Opts'}}">{{button.type}}
</div>
<!-- Modal -->
<div ng-attr-id="{{button.type+'Opts'}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{button.type}}</h4>
<h5> Record:{{date | date:'yyyy-MM-dd-HH:mm:ss'}}</h5>
</div>
<div class="modal-body">
<textarea name="Reason" class="form-control" rows="5" style="min-width: 100%"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But for some reason, the modal just does not show up. I tried adding ng-show attribute, but that didn't work either. Somehow the ids aren't being generated properly.
You need to include the id selector '#' in data-target attribute, also for the selector to work button type needs no space.
<div ng-app="MyApp" ng-controller="loadCtrl" class="container">
<div ng-repeat="button in buttons" class="btn-group">
<div class="btn btn-sq-lg btn-primary" data-toggle="modal" data-target="{{'#' + button.type+'Opts'}}">{{button.type}}
</div>
<!-- Modal -->
<div id="{{button.type+'Opts'}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{button.type}}</h4>
<h5> Record:{{date | date:'yyyy-MM-dd-HH:mm:ss'}}</h5>
</div>
<div class="modal-body">
<textarea name="Reason" class="form-control" rows="5" style="min-width: 100%"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Controller :
var app = angular.module('MyApp', []);
app.controller('loadCtrl', ['$scope', '$http', function($scope, $http) {
$scope.buttons = [{
Id: '1',
type: 'FirstButton'
}, {
Id: '2',
type: '2ndButton'
}, {
Id: '3',
type: '3rdButton'
}];
}]);
See working demo here
I am using accordion component of Angular Bootstrap UI. The first accordion is expanded by default. When user add new accordion then first accordion should collapse and newly added accordion should be expand. When user clicks any accordion then it should be expanded and collapse rest of the accordions. User can add more than one accordion.
How can I achieve this?
I'm newbie to angular and Angular Bootstrap UI.
What I have done so far
Ctrl.js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function($scope) {
$scope.oneAtATime = true;
$scope.groups = [{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
}, {
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}, {
title: 'Dynamic Group Header - 3',
content: 'Dynamic Group Body - 3'
}];
$scope.status = {
isCustomHeaderOpen: false,
isFirstOpen: true,
isFirstDisabled: false
};
// work permit form
$scope.transforms = [{
name: "transform",
id: 1,
wpformfields: [{
employee: '',
admount: ''
}]
}];
$scope.addtransactionForm = function(transform) {
$scope.currentnum = transform.wpformfields.length;
//alert("hello");
transform.wpformfields.push({
employee: '',
amount: ''
});
};
});
index.html
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.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="AccordionDemoCtrl" class="container">
<br>
<br>
<br>
<div class="row">
<div class="col-md-10">
<form role="form" id="$index" class="base-form" ng-repeat="form in transforms track by $index">
<input type="checkbox" ng-model="oneAtATime" style="display:none">
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled" ng-repeat="itemfield in form.wpformfields track by $index">
<uib-accordion-heading>
Transaction <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isFirstOpen, 'glyphicon-chevron-right': !status.isFirstOpen}"></i>
</uib-accordion-heading>
<div class="md-col-10 main-container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Employee name </label>
<input type="text" class="form-control" name="employee" id="employee" ng-model="itemfield.employee">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Amount </label>
<input type="text" class="form-control" name="amount" id="amount" ng-model="itemfield.amount">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-default pull-right" ng-click="addTransaction(form, $index)"><i class="fa fa-floppy-o"></i> Save record</button>
</div>
</div>
</div>
</div>
</uib-accordion>
<div class="row">
<div class="col-md-12 col-md-offset-5">
<a class="btn btn-danger" ng-click="addtransactionForm(form)"><i class="fa fa-user-plus fa-lgt" ></i> Add new transaction record</a>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Plunker available link
There is modified version which should satisfy your needs. Basically, you need to add isOpen and isDisabled property for each accordion then set isOpen to true for new accordion, others will be closed automatically.