Angular JS – Bootstrap Popup, Search, Sort

note.html

<html ng-app=”myNoteApp”>

<head>

<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script&gt;
<script src=”ui-bootstrap-tpls-0.12.0.min.js”></script>
<link rel=”stylesheet” href=”bootstrap.css”/>
</head>

<body>

<div ng-controller=”myNoteCtrl”>
<button ng-click=”openModal();”>Search</button>
</div>

<script src=”myNoteApp.js”></script>
<script src=”myNoteCtrl.js”></script>

</body>
</html>


myNoteApp.js

var app = angular.module(“myNoteApp”, [‘ui.bootstrap’]);

var ModalInstanceCtrl = function ($scope, $modalInstance, $parse) {
$scope.items = [{country: “India”, name: “Babu”}, {country: “US”, name: “Arun”},{country: “Swiss”, name: “Sri”}];
$scope.selected = {
item: $scope.items[0]
};

$scope.ok = function (item) {
$modalInstance.close(item);
};

$scope.cancel = function () {
$modalInstance.dismiss(‘cancel’);
};

};


myNoteCtrl.js

app.controller(“myNoteCtrl”, function($scope, $modal) {
$scope.names = [{country: “India”, name: “Babu”}, {country: “US”, name: “Arun”},{country: “Swiss”, name: “Sri”}];
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: ‘search.html’,
controller: ModalInstanceCtrl
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
});
};
});

popup


Advertisements