I think i have some pretty big holes in my code, as when the modal is appearing, the content from the table (which when you click on a row produces the modal), is not populating the input boxes I have inside of the modal. I think I'm tackling the situation in the wrong way and some direction would be fantastic.
My JS:
var app = angular.module('peopleInformation', ['ngAnimate','ui.bootstrap']);
app.controller('myCtrl', function($scope, $http, $uibModal) {
$http.get("Assignment005.json").success(function(response){
$scope.myData = response.People;
});
$scope.modify = function(currentData){
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'myModalContent.html',
controller:function($scope, $uibModalInstance, details){
$scope.FirstName = details.FirstName;
$scope.LastName = details.LastName;
$scope.Age = details.Age;
$scope.Nickname = details.Nickname;
$scope.update = function () {
$uibModalInstance.dismiss('cancel');
};
},
size: 'lg',
resolve: {
details: function() {
return currentData;
}
}
});
};
});
My modal:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Your row of data</h4>
</div>
<div class="modal-body" name="modelData" style="height:200px">
<form class="form-horizontal pull-left form-width" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="first">First Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="first" ng-model="FirstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="last">Last Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="last" ng-model="LastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="age">Age:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="age" ng-model="Age">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="nick">Nickname:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nick" ng-model="Nickname">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success pull-right" data-dismiss="modal">Submit</button>
</div>
</div>
Main HTML in case it's needed:
<body>
<div data-ng-app="peopleInformation" data-ng-controller="myCtrl" class="jumbotron">
<div class="panel panel-default">
<div class="panel-heading">Essential Information</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Nickname</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="details in myData" data-ng-click="modify(details)">
<td>{{ details.FirstName }}</td>
<td>{{ details.LastName }}</td>
<td>{{ details.Age }}</td>
<td>{{ details.Nickname }}</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info pull-right" data-ng-click="new()">Add
</button>
</div>
</div>
<div ng-include="myModalContent.html"></div>
</div>
</body>
Im very new to using Angular so if you could be overtly simple with me that would help to clarify things, although again, any help is appreciated.
Bellow is the angular modal instance controller
app.controller('ModalInstanceCtrl', function ($scope,
$uibModalInstance, item) {
$scope.customer = item;
$scope.yes = function () {
$uibModalInstance.close(); };
$scope.no = function () {
$uibModalInstance.dismiss('cancel');
};
});
bellow is the code for call angular modal
$scope.open = function (item) {
var modalInstance = $uibModal.open({
animation: true,
scope: $scope,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'md',
resolve: {
item: function () {
return item;
}
}
});
modalInstance.result.then(function (selectedItem) {
$log.info(selectedItem);
});
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
Bellow is code for template
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Re-calculate retail price</h3>
</div>
<div class="modal-body">
Margin percent of selected customer is <b>{{ customer.margin_percent }}</b> <br />
Do you want to recalculate the retail price?
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="yes()">Yes</button>
<button class="btn btn-warning" type="button" ng-click="no()">No</button>
</div>
</script>
I was actually assigning the values in the wrong place I believe. I moved the:
$scope.FirstName = details.FirstName;
Outside of the var modalInstance variable, and they are now populating the input boxes. If this is messy or not standard then let me know as sometimes the right result is not always the right method. Thanks for those that tried to help, much appreciated.
In your HTML file you are passing different parameter to modify function, It should be equal to the parameter specified in ng-repeat directive.
So in this case this:
<tr data-ng-repeat="data in myData" data-ng-click="modify(details)">
will become:
<tr data-ng-repeat="details in myData" data-ng-click="modify(details)">
Related
the pushed data from the model is not reflecting in the first table. It is there in console. The fiddle link is attached with this please help me on this.
fiddle link ---- http://jsfiddle.net/8MVLJ/2649/
html=========
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"></script>
<div class="container" ng-app="app" ng-controller="Controller">
<div class="row">
<div class="col-xs-12">
<table class="table table-striped table-bordered">
<thead>
<th>Attribute Name</th>
<th>Attribute Value</th>
</thead>
<tbody>
<tr ng-repeat="newdetail in newDetails">
<td>
<p ng-model="detail">{{newdetail.attrName}} </p>
</td>
<td>
<p ng-model="detailValue">{{newdetail.userAttrValue}} </p>
</td>
</tr>
</tbody>
</table>
<a class="btn btn-default" href ng-click="show()">Select Attribute</a>
<script type="text/ng-template" id="modal.html">
<div class=" ngdialog-messsage modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<table class="table table-striped table-bordered">
<thead>
<th>
<input type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}">
</th>
<th>Attribute Name</th>
<th>Attribute Value</th>
</thead>
<tbody>
<tr ng-repeat="detail in details">
<td>
<input type="checkbox" ng-model="detail.Selected">
</td>
<td>
<p ng-model="detail">{{detail.attrName}}</p>
</td>
<td>
<select ng-model="detail.user_attr_value" ng-init="detail.user_attr_value=detail.attr_value_Ind.split(',')[0]" class="form-control full-width">
<option ng-repeat="option in detail .attr_value_Ind.split(',')" value="{{option}}">{{option}}</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<input type="button" class="btn btn-primary" value="Add Selected" ng-click="add();close('Cancel')">
<input type="button" class="btn btn-danger " ng-click="checkAll(details.length)" value="Clear">
</div>
</div>
</div>
</div>
</div>
</script>
</div>
</div>
</div>
js===================
var app = angular.module('app', ['angularModalService']);
app.controller('Controller', function($scope, $element, ModalService) {
$scope.newDetails = [{
"attrName": "userType",
"userAttrValue": "Customer",
"userOrGroupId": "aaaazzz8522",
}];
$scope.add = function() {
angular.forEach($scope.details, function(detail) {
if (detail.Selected == true) {
$scope.newDetails.push({
'attrName': detail.attrName,
'attrName': detail.user_attr_value
});
$element.modal('hide');
close($scope.newDetails, 500);
console.log("loop", $scope.newDetails);
}
});
};
$scope.show = function() {
ModalService.showModal({
templateUrl: 'modal.html',
controller: "Controller"
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {});
});
};
//=================================================
$scope.close = function(result) {
close(result, 600);
};
$scope.details = [{
"attrName": "region",
"attrType": "USER",
"attr_value_Ind": "CHN-N,CHN-S,CHN-C",
"buId": "DEFAULT",
}];
var getAllSelected = function() {
var selecteddetails = $scope.details.filter(function(detail) {
return detail.Selected;
});
return selecteddetails.length === $scope.details.length;
}
var setAllSelected = function(value) {
angular.forEach($scope.details, function(detail) {
detail.Selected = value;
});
}
$scope.allSelected = function(value) {
if (value !== undefined) {
return setAllSelected(value);
} else {
return getAllSelected();
}
}
$scope.checkAll = function(Count) {
angular.forEach($scope.details, function(details) {
details.Selected = false;
});
};
});
i have updated your fiddle please check and review.http://jsfiddle.net/8MVLJ/2652/
it's not pushing it's value because you have pass scope in your modal controller and set parent scope like this
ModalService.showModal({
templateUrl: 'modal.html',
controller: "Controller",
scope:$scope <-- added here scope
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {});
});
and add $parent to push your value like this
$scope.$parent.newDetails.push({ <-- added $parent here
'attrName': detail.attrName,
'userAttrValue': detail.user_attr_value
});
I'm trying to get the data from a row (once clicked) to fill a pop-up modal window with that row of data. And then you should be able to change the data and resubmit, updating the data in the table.
The below is the code for firstly my table, and then the modal.
The data that fills the table is retrieved through a $http get request, but when the data inside the modal is changed and the table is updated subsequently, the json file retrieved does not need to be updated.
I feel I've done a large amount of searching, but all the other answers have pointed me in different directions to what I seek, or I'm searching for the wrong thing.
I'm not seeking a full solution, but if anyone could guide me in the right direction that would be very helpful. Thanks in advance for any knowledge you can share on this.
To reiterate, this is what I'm struggling with:
"I'm trying to get the data from a row (once clicked) to fill a pop-up modal window with that row of data. And then you should be able to change the data and resubmit, updating the data in the table. "
<body>
<div data-ng-app="peopleInformation" data-ng-controller="myCtrl" class="jumbotron">
<div class="panel panel-default">
<div class="panel-heading">Essential Information</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Nickname</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="data in myData" data-ng-click="modify(data)">
<td>{{ data.FirstName }}</td>
<td>{{ data.LastName }}</td>
<td>{{ data.Age }}</td>
<td>{{ data.Nickname }}</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info pull-right" data-ng-click="new()">Add
</button>
</div>
</div>
</div>
</body>
Here is my modal html:
<div class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Your row of data</h4>
</div>
<div class="modal-body" name="modelData">
<form class="form-horizontal pull-left form-width" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="first">First Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="first" ng-bind="FirstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="last">Last Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="last" ng-bind="LastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="age">Age:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="age" ng-bind="Age">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="nick">Nickname:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nick" ng-bind="Nickname">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success pull-right" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
Here is my JS so far too:
var app = angular.module('peopleInformation', ['ngAnimate','ui.bootstrap']);
app.controller('myCtrl', function($scope, $http, $uibModal) {
$http.get("xxxxxx.json").success(function(response){
$scope.myData = response.People;
});
$scope.modify = function(currentData){
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
details: function() {
return currentData;
}
}
});
};
});
app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, details){
$scope.FirstName = details.FirstName;
$scope.LastName = details.LastName;
$scope.Age = details.Age;
$scope.Nickname = details.Nickname;
});
I want to use angular modal for CRUD operation, so for firing the modal we have button by id modalFire in ng-controller="ModalDemoCtrl" , this is my modal:
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">....</h3>
</div>
<div class="modal-body">
<form id="productForm" novalidate>
<div>
<label for="ProductName"> productName :</label>
<input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required />
</div>
<div style="margin:10px">
<label for="Price">price :</label>
<input type="text" name="Price" id="Price" ng-model="model.Price" />
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">save</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" id="modalFire" class="btn btn-default modalBtn" ng-click="open()">UpdateProduct</button>
</div>
and it's controller:
App.controller('ModalDemoCtrl', function ($scope, $modal) {
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
});
App.controller('ModalInstanceCtrl', function ($scope, $modalInstance, $http) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
and i have a grid that shows ProductList :
<div ng-controller="ProductController" ng-init="GetAllProducts()">
<div class="row" style="margin-top:90px" ng-show="!ShowGrid">
<article class="widget">
<header class="widget__header">
<div class="widget__title">
<i class="pe-7s-menu"></i><h3>ProductList</h3>
</div>
<div class="widget__config">
<i class="pe-7f-refresh"></i>
<i class="pe-7s-close"></i>
</div>
</header>
<div class="widget__content table-responsive">
<table class="table table-striped media-table">
<thead style="background-color:rgba(33, 25, 36,0.1)">
<tr>
<th style="width:30%">price</th>
<th style="width:30%">productName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in Products">
<td>{{product.Price}}</td>
<td>{{product.ProductName}}</td>
</tr>
</tbody>
</table>
</div>
</article>
</div>
</div>
so, i want a way to add a button or <a> element for each row in grid that can fire the modal, is there any way?
Unless I misunderstand your question, why not just add the button to your ng-repeat in your table. For example:
<table class="table table-striped media-table">
<thead style="background-color:rgba(33, 25, 36,0.1)">
<tr>
<th>Price</th>
<th>ProductName</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in Products">
<td>{{product.Price}}</td>
<td>{{product.ProductName}}</td>
<td><button ng-click="loadItem(product)>Edit</button></td>
</tr>
</tbody>
</table>
Then inside your controller, just pass the product into your modal load function. For example:
$scope.loadItem = function(product){
var modalInstance = $modal.open({
animation: true,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
product: function () {
return product;
}
}
});
};
See how you can pass the product to the function, and then use resolve to pass the product into the modal. In your modal controller you would attach the product to the $scope, and use it as you would any other view.
my ng-repeat is not updating after attempting to add an item to scope.
Here is my html:
<div class="col-lg-12">
<div class="panel-group" id="accordion">
<div class="panel panel-collapse panel-default" id="topPanel">
<div class="panel-heading" data-toggle="collapse" data-target="#top-action-panel-body">
<h4 class="panel-title">
Collapsible Group Item #1
</h4>
</div>
<div id="top-action-panel-body" class="panel-collapse collapse">
<div class="panel-body">
<form class="ih_enterprise_api_stock_item_new form-horizontal form-stock-item-add" ng-submit="test()" ng-controller="InventoryAddCtrl" id="ihenterprise_logisticsbundle_stockItem">
<div class="form-group">
<label class="col-sm-4 control-label control-label required" for="ihenterprise_logisticsbundle_stockItem_name">Name</label>
<div class="col-sm-8">
<input type="text" id="ihenterprise_logisticsbundle_stockItem_name" name="ihenterprise_logisticsbundle_stockItem[name]" required="required" maxlength="255" ng-model="formData.name" class="form-control form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label control-label required" for="ihenterprise_logisticsbundle_stockItem_itemNo">Item no</label>
<div class="col-sm-8">
<input type="text" id="ihenterprise_logisticsbundle_stockItem_itemNo" name="ihenterprise_logisticsbundle_stockItem[itemNo]" required="required" maxlength="255" ng-model="formData.itemNo" class="form-control form-control">
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<input type="submit" class="btn btn-success" value="Tilføj">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12" ng-controller="InventoryListCtrl">
<div class="panel panel-default" style="color: black; text-align: left">
<div class="panel-heading">
<h3>Lager liste</h3>
</div>
<div class="panel-body table-responsive">
<table class="table table-condensed table-expanding">
</table><table class="table table-condensed table-expanding">
<thead>
<tr>
<th> </th>
<th>Id</th>
<th>Created At</th>
<th>Navn</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="stockItem in stockItems" data-toggle="collapse" data-target="#stockItem_{{stockItem.id}} " class="accordion-toggle">
<td>
<button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
<td>{{stockItem.id}} </td>
<td>{{stockItem.created_at}} </td>
<td>{{stockItem.name}} </td>
</tr>
<tr ng-repeat-end="">
<td colspan="6" class="hiddenRow">
<div class="accordian-body collapse" id="package_{{stockItem.id}} ">
test
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Here is my code:
App.js
'use strict';
var app = angular.module('cmfApp', [
'ngRoute',
]);
angular.module('cmfApp.controllers', []);
InventoryRouting.js
angular.module('cmfApp').config(function($routeProvider){
$routeProvider.
when('/inventory', {
templateUrl: Routing.generate('ih_enterprise_user_dashboard_inventory'),
controller: 'InventoryListCtrl'
})
});
InventoryController.js
angular.module('cmfApp').controller('InventoryAddCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout){
$scope.submit = function() {
var postData = {
ihenterprise_logisticsbundle_stockItem: {
name: $scope.formData.name,
itemNo: $scope.formData.itemNo
}
}
$http({
method : 'POST',
url : Routing.generate('ih_enterprise_api_stock_item_new'),
data : $.param(postData), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
// the code you want to run in the next digest
$scope.$apply(function(data){
$scope.stockItems = $scope.stockItems.concat(data);
});
//console.log($scope.stockItems);
}).error(function(error) {
console.log(error);
});
};
$scope.test = function() {
console.log("here");
$scope.stockItems.push({
id: 1000,
name: 'potato',
created_at: '1111'
});
console.log($scope.stockItems);
}
}]);
Ignore the HTTP request, i was thinking it was a HTTP related issue, but it seems much more fundamental, as i attempted to just insert a plain object on submit.
You seem to be instantiating the InventoryListCtrl twice: Once in the route definition, and again in the HTML template. As a result, when you update the stockItems array, it's not updating the same array used in the view.
Try removing the ng-controller="InventoryListCtrl" from the template.
This will make InventoryListCtrl be the controller for the entire HTML template (b/c of the route definition). InventoryAddCtrl is used inside the template and it will inherit the scope of InventoryListCtrl. So when you update $scope.stockItems from either controller, you'll now be updating the same object.
Learning some AngularJS here...
I have an Angular application which connects to an ASP.Net WebAPI.
I am trying to have a DIV inside my HTML open as a modal window.
My HTML looks as follows:
<div class="container" style="padding-top:20px;">
<div ng-app="vehicleApp" data-ng-controller="testingController" class="container">
<div ng-show="error" class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<p>{{ error }}</p>
</div>
<div class="modal fade" id="vehicleModel" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title" id="myModalLabel" ng-hide="editMode">Add vehicle</h4>
<h4 class="modal-title" id="myModalLabel" ng-show="editMode">Edit vehicle: {{ vehicle.Id }}</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" name="addvehicleform">
<div class="form-group">
<label for="title" class="col-sm-3 control-label">vehicle Name</label>
<div class="col-sm-7">
<input type="text" data-ng-model="vehicle.Name" class="form-control" id="vehiclename" placeholder="vehicle Name" required title="Enter your vehicle Name" />
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-3 control-label">Identification Account</label>
<div class="col-sm-7">
<input type="number" data-ng-model="vehicle.vehicleIdentificationAccountId" class="form-control" id="vehicleIdentificationAccountId" placeholder="vehicle Identification Account" required title="Enter your Identification Account" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-7">
<span data-ng-hide="editMode">
<input type="submit" value="Add" ng-disabled="addvehicleform.$invalid" data-ng-click="add()" class="btn btn-primary normal-button" />
</span>
<span data-ng-show="editMode">
<input type="submit" value="Update" ng-disabled="addvehicleform.$invalid" data-ng-click="update()" class="btn btn-primary normal-button" />
</span>
<input type="button" value="Cancel" data-ng-click="cancel()" class="btn btn-primary" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<h1>Vehicle List</h1>
<p><a data-ng-click="showadd()" href="javascript:;" class="btn btn-primary">Add New vehicle</a></p>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>Vehicle ID</th>
<th>Name</th>
<th>Identification Account</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr data-ng-hide="agencies || agencies.length > 0">
<td colspan="4">
<div class="text-center text-warning">
<strong>No Agencies Retrieved</strong>
</div>
</td>
</tr>
<tr data-ng-repeat="vehicle in agencies">
<td>{{vehicle.Id}}</td>
<td>{{vehicle.Name}}</td>
<td>{{vehicle.vehicleIdentificationAccountId}}</td>
<td>
<a data-ng-click="get(vehicle)" href=""><span class="glyphicon glyphicon-open"></span>View</a>
<a data-ng-click="edit(vehicle)" href=""><span class="glyphicon glyphicon-edit"></span>Edit</a>
<a data-ng-click="showConfirm(vehicle)" href=""><span class="glyphicon glyphicon-remove-circle"></span>Delete</a>
</td>
</tr>
</tbody>
</table>
<hr />
<div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title" id="myModalLabel">View vehicle Detail</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" name="viewuser">
<div class="form-group">
<label for="ID" class="col-sm-3 control-label">ID</label>
<div class="col-sm-7">
{{vehicle.Id}}
</div>
</div>
<div class="form-group">
<label for="Name" class="col-sm-3 control-label">Name</label>
<div class="col-sm-7">
{{vehicle.Name}}
</div>
</div>
<div class="form-group">
<label for="vehicleIdentificationAccountId" class="col-sm-3 control-label">Identification Account</label>
<div class="col-sm-7">
{{vehicle.vehicleIdentificationAccountId}}
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title" id="myModalLabel">Confirm</h4>
</div>
<div class="modal-body">
Are you sure you want to delete vehicle: {{ vehicle.Name}}?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-ng-click="delete()" style="width:100px;">Ok</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" style="width:100px;">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
testingController.js
'use strict';
app.controller('testingController', function ($scope, testingDataService, $modal) {
$scope.vehicles = [];
$scope.vehicle = null;
$scope.editMode = false;
// Get vehicle
$scope.get = function () {
$scope.vehicle = this.vehicle;
$('#viewModal').modal('show');
};
//get all vehicles
$scope.getAll = function () {
testingDataService.getvehicleList().success(function (data) {
$scope.vehicles = data;
}).error(function (data) {
$scope.error = "An Error has occured while Loading vehicles! " + data.ExceptionMessage;
});
};
// add vehicle
$scope.add = function () {
var currentvehicle = this.vehicle;
if (currentvehicle != null && currentvehicle.Name != null && currentvehicle.vehicleIdentificationAccountId!= null) {
testingDataService.addvehicle(currentvehicle).success(function (data) {
$scope.addMode = false;
currentvehicle = data;
$scope.vehicles.push(currentvehicle);
//reset form
$scope.vehicle = null;
$('#vehicleModel').modal('hide');
}).error(function (data) {
$scope.error = "An Error has occured while Adding vehicle! " + data.ExceptionMessage;
});
}
};
//edit vehicle
$scope.edit = function () {
$scope.vehicle = this.vehicle;
$scope.editMode = true;
$('#vehicleModel').modal('show');
};
//update vehicle
$scope.update = function () {
var currentvehicle = this.vehicle;
testingDataService.updatevehicle(currentvehicle).success(function (data) {
currentvehicle.editMode = false;
$('#vehicleModel').modal('hide');
}).error(function (data) {
$scope.error = "An Error has occured while Updating vehicle! " + data.ExceptionMessage;
});
};
// delete
$scope.delete = function () {
currentvehicle = $scope.vehicle;
testingDataService.deletevehicle(currentvehicle).success(function (data) {
$('#confirmModal').modal('hide');
$scope.vehicles.pop(currentvehicle);
}).error(function (data) {
$scope.error = "An Error has occured while Deleting vehicle! " + data.ExceptionMessage;
$('#confirmModal').modal('hide');
});
};
//Modal popup events
$scope.showadd = function () {
$scope.vehicle = null;
$scope.editMode = false;
$('#vehicleModel').modal({ backdrop: 'static' });
$('#vehicleModel').modal('show');
};
$scope.showedit = function () {
$('#vehicleModel').modal({ backdrop: 'static' });
$('#vehicleModel').modal('show');
};
$scope.showConfirm = function (data) {
$scope.vehicle = data;
$('#confirmModal').modal('show');
};
$scope.cancel = function () {
$scope.vehicle = null;
$('#vehicleModel').modal('hide');
}
// initialize your users data
$scope.getAll();
});
Basically when I click on the Add New Vehicle button, the console says:
ReferenceError: $ is not defined
on the line in the controller where it is supposed to show the modal:
$('#vehicleModel').modal({ backdrop: 'static' });
I am a bit lost on how to resolve this.
Appreciate any insight.
P.S. The data loads fine when this HTML view is loaded up. I also added a console.log inside the
$scope.showadd = function (){
console.log('Test');
};
and that is logged properly in the console. So totally lost right now...
Update:
Did a little more investigation. I issued in Chrome console the command:
$('#vehicleModel')
and it showed me the div with the id=vehicleModel.
I would argue that you should probably be using Angular UI Bootstrap to create your modal dialogs. Here is the link.
Here is a cut down version of how to open a modal using Angular UI Bootrstrap:
$scope.open = function (vehicle) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
resolve: {
items: function () {
return $scope.items;
}
}
});
};
MODAL CONTENT
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Modal!</h3>
</div>
<div class="modal-body">
<div >Body</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$close('awesome')">OK</button>
<button class="btn btn-warning" ng-click="$dismiss('nah')">Cancel</button>
</div>
</script>
HTML
<a data-ng-click="open(vehicle)" href=""><span class="glyphicon glyphicon-open"></span>View</a>
You're trying to grab your element the jQuery way. $ is reserved in Angular. try using:
angular.element('div').modal({ backdrop: 'static' });
where 'div' is whatever your actual tag name is, and traverse the DOM for it...
EDIT: from https://docs.angularjs.org/error/jqLite/nosel
In order to resolve this error, rewrite your code to only use tag name selectors and manually traverse the DOM using the APIs provided by jqLite.
Alternatively, you can include a full version of jQuery, which Angular
will automatically use and that will make all selectors available.
You can code like this:
// Pre-fetch an external template populated with a custom scope
var myOtherModal = $modal({scope: $scope, template: 'modal/docs/modal.demo.tpl.html', show: false});
// Show when some event occurs (use $promise property to ensure the template has been loaded)
$scope.showModal = function() {
myOtherModal.$promise.then(myOtherModal.show);
};