I have defined a separate controllers for the base page and modal on that page which has a form with value contained from local storage. Issue is this modal controller loads the value for the modal elements when the page is loaded on DOM and shows that value each time it pops up. But it needs to load values from local storage each time it pops up as it needs to have separate values.
HTML:
<div ng-controller="resourceListController">
<table>
<tbody>
<tr ng-repeat="resource in filteredList|orderBy:orderProperty:reverse" ng-click="showDetails(resource)" data-toggle="modal" data-target="#resourceDetailModal">
<td> {{resource.ResourceName}}</td>
<td> {{resource.Age}}</td>
</tr>
</tbody>
</table>
<div>
<!-- Resource Detail Modal-->
<div class="modal fade" id="resourceDetailModal" tabindex="-1" ng-cloak ng-controller="resourceDetailController">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-4">Resource Name</label>
<div class="col-xs-8"><label class="form-control">{{resource.ResourceName}}</label></div>
</div>
<div class="form-group">
<label class="control-label col-xs-4">Age</label>
<div class="col-xs-8"><label class="form-control">{{resource.Age}}</label></div>
</div>
</form>
</div>
</div>
</div>
Angular script:
resourceListController:
$scope.showDetails = function(resource) {
localStorage.setItem("res", JSON.stringify(resource));
};
resourceDetailController:
resourceApp.controller('resourceDetailController', function($scope) {
$scope.resource = JSON.parse(localStorage.getItem("res"));
});
You can add below code in your resourceDetailController to update your modal data whenever it pops up.
Edit:
$scope.showDetails = function(resource) {
localStorage.setItem("res", JSON.stringify(resource));
$("#resourceDetailModal").modal();
};
$scope.data={};
$scope.data.filteredList=[{ResourceName:"AkankshaGupta ",Age:93},
{ResourceName:"Asha",Age:91}];
});
resourceApp.controller('resourceDetailController', function($scope) {
$( "#resourceDetailModal" ).on('show.bs.modal', function(){
$scope.resource = JSON.parse(localStorage.getItem("res"));
});
});
Please check this code
, it is working. I removed data-target instead showing modal manually
HTML:<tr ng-repeat="resource in data.filteredList" ng-click="showDetails(resource)"></tr>
I hope this helps
Related
I'm trying to put to a modal the attributes of a clicked table row. I am using angularjs. Nothing happens in my code:
Basically this is my html code like below:
<tr ng-repeat="pokemons in pokemon">
<td>{{pokemons.pokemon_number}}</td>
<td>{{pokemons.pokemon_name}}</td>
<td>{{pokemons.type1}}</td>
<td>{{pokemons.type2}}</td>
</tr>
Then this is in my script tag:
var myApp = angular.module('myApp', [])
myApp.controller('SimpleController', ['$scope', '$http', function($scope, $http) {
$scope.findPokemon = function(filterKey){
$http.get('pokemon/search-by-name/' + filterKey).then(function(response) {
$scope.pokemon = response.data
})
}
$scope.getDetails = function(pokemons){
$scope.pokemonDetails = pokemons
$('#viewModal').modal('show');
}
}]) `
Modal:
<div id="pokemon-zoom" class="modal">
<div class="modal-content animate">
<div class="imgcontainer">
<span onclick="document.getElementById('pokemon-zoom').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="modal-container">
<img id="pokemon-image" src="Bulbasaur.jpg" height="200px" width="200px">
<div class="pokemon-details">
<h1>Pokemon Data</h1>
<div id="pokemon-data-text">
<p>Pokemon no: {{pokemonDetails.pokemon_number}}</p>
<p>Type1: {{pokemonDetails.type1}}</p>
<p>Type2: {{pokemonDetails.type12}}</p>
<p></p>
</div>
</div>
<div class="options">
<button class="options-link" href="#">Edit</a>
<button class="options-link" href="#">Delete</a>
</div>
</div>
</div>
</div>
Btw some parts there seem unnecessary i just included them
Here is the answer for your problem
HTML
<table>
<tr ng-repeat="pokemons in pokemon">
<td>{{pokemons.pokemon_number}}</td>
<td>
<button type="button" class="btn btn-default"
style="width:100px; height:25px"
ng-click="openModal(pokemons)"
data-toggle="modal" data-target="#pokemon-zoom" >
{{pokemons.pokemon_name}}</button>
</td>
<td>{{pokemons.type1}}</td>
<td>{{pokemons.type2}}</td>
</tr>
</table>
Modal Code is this
<div id="pokemon-zoom" class="modal">
<div class="modal-content animate">
<div class="imgcontainer">
<span onclick="document.getElementById('pokemon-zoom').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="modal-container">
<img id="pokemon-image" src="Bulbasaur.jpg" height="200px" width="200px">
<div class="pokemon-details">
<h1>Pokemon Data of</h1>
<div id="pokemon-data-text">
<p>Pokemon no: {{selected_pokemon.pokemon_number}}</p>
<p>Type1: {{selected_pokemon.type1}}</p>
<p>Type2: {{selected_pokemon.type12}}</p>
<p></p>
</div>
</div>
<div class="options">
<button class="options-link" href="#">Edit</button>
<button class="options-link" href="#">Delete</button>
</div>
</div>
</div>
</div>
your controller will be having a method with name openModal
$scope.openModal=function (ob){
$scope.selected_pokemon=ob;
}
Here is a LIVE DEMO
You're trying to show the modal by calling $('#viewModal').modal('show');, but your modal has id pokemon-zoom. Show the modal by calling $('#pokemon-zoom').modal('show');
Make sure the modal is defined within the scope of the Controller SimpleController so that it can access pokemonDetails!
I am using Mobile Angular UI.
In parent window there is list of category names. I want selected category name should get updated from modal. I am able to display modal. I want to pass selected category item from parent view to modal.
My code in parent view
<div ng-controller="CategoryController as TitleCats">
<div ng-repeat="cats in TitleCats.categories">
<a href=""
ui-turn-on="titleCatUpdatemodal"
class="btn btn-default" ng-click="TitleCats.openUpdateModel(cats)"> {{cats.name}} --> Edit</a>
</div>
<div ui-content-for="modals">
<div ng-include="'pages/titleCatUpdatemodal.html'"></div>
</div>
</div>
My Modal is
<div class="modal" ui-if='titleCatUpdatemodal' ui-state='titleCatUpdatemodal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="titleCatUpdatemodal">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p><input type="text" ng-model="cats.name" >{{ cats.name }}</p>
</div>
<div class="modal-footer">
<button ui-turn-off="titleCatUpdatemodal" class="btn btn-default">Close</button>
<button ui-turn-off="titleCatUpdatemodal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
When i click button it opens modal but no value!
Anyone please let me know how to get value in modal. Thanks in advance.
In your controller. you should have something similar to this:
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'templates/myModal.html',
controller: 'myModalCtrl',
resolve: {
myData: function () {
//do stuff
return stuff;
}
}
});
Inside that resolve, you can fill out the function which should then be accessible in your modals controller
I created a custom directive that has event handler on it and use it 3 times.
<div sl-entity-browser btn_label="Browse supplier" handler="supplier_selection_handler(entity)" />
<div sl-entity-browser btn_label="Browse checker" handler="checker_selection_handler(entity)" />
<div sl-entity-browser btn_label="Browse approving officer" handler="approvar_selection_handler(entity)" />
In my controller:
$scope.supplier_selection_handler = function(entity){
$scope.selectedSupplier = entity;
}
$scope.checker_selection_handler = function(entity){
$scope.selectedChecker = entity;
}
$scope.approvar_selection_handler = function(entity){
$scope.selectedApprovingOfficer = entity;
}
My directive:
return {
scope : {
btnLabel : '#',
handler: '&'
},
restrict: 'AE',
templateUrl: '/common/sl-entity-browser',
link: function (scope, elem, attrs) {
// expose selected account to the outside world
scope.selectEntity = function(entity) {
return $timeout(function() {
return scope.handler({
entity: entity
});
});
}
}
};
HTML template:
<button title="browse account" class="btn btn-primary" data-toggle="modal" data-target="#slEntityModal"> {{ btnLabel }}</button>
<div class="modal fade" id="slEntityModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" style="width: 90%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Browse entities</h4>
</div>
<div class="modal-body">
<div>
<div class="row">
<div class="input-group pull-right" style="width: 300px">
<input class="form-control" placeholder="Search" ng-model="query" />
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="row-top-buffer" style="margin-top: 15px"/>
<div class='row' style="border-top: 1px solid #dcdcdc; padding-top: 10px">
<div class="col-md-1 col-lg-1"><span style="font-weight: bold; padding-left: 2px;">Acct No</span></div>
<div class="col-md-5 col-lg-5"><span style="font-weight: bold; padding-left: 30px;">Name</span></div>
<div class="col-md-6 col-lg-6"><span style="font-weight: bold">Address</span></div>
</div>
<div class="row-top-buffer" style="margin-top: 5px"/>
<div class="row" style='max-height: 500px; overflow: auto;'>
<div ng-show="!slEntities">Loading entities...</div>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr data-dismiss="modal" ng-repeat="entity in entities = (slEntities | filter:query)" style="cursor: pointer" ng-click="selectEntity(entity)">
<td style="width: 100px;">{{entity.accountNo}}</td>
<td style="width: 480px;">{{entity.name}} <span class="label {{entityClass(entity.marker)}} pull-right">{{convert(entity.marker)}}</span></td>
<td>{{entity.address}}</td>
</tr>
<tr ng-show="entities.length == 0"><td colspan="3" align="center">No records found</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The directive will render a button that will display a modal when clicked. The modal contains a table of items. If a certain item is selected, the modal will be disposed and the event should trigger the correct one as defined. The problem is that the first directive instance' event handler (supplier_selection_handler) is always called.
I am new to AngularsJs.
Thanks in advance.
This is because the modal opened by your directives (all of them!) is the first directive's modal. Notice that all your modals share the same ID? and the data-target of your buttons share the same ID? Since an ID of an element is unique, then once an element with that specific ID is found, it'll stop searching for another element with such ID. Thus, all your buttons that opens a modal simply opens the first modal.
I recommend that you use angular-bootstrap's modal instead, the component itself runs in the AngularJS context so no scoping problems may occur.
The example below shows how to create a directive that can makes use of angular-bootstrap's modal, I trimmed down the code below to simplify the demo.
DEMO
INDEX
<body ng-controller="Ctrl">
<button sl-entity-browser
btn-label="hello world"
handler="messageHandler('This is a message from hello world')"
class="btn btn-primary">
Hello World?
</button>
<button sl-entity-browser
btn-label="Yeah Baby"
handler="messageHandler('WEEEE wOoOoOw')"
class="btn btn-primary">
Baby?
</button>
<button sl-entity-browser
btn-label="Boom!"
handler="messageHandler('This is kaboom boom!')"
class="btn btn-primary">Kaboom!</button>
</body>
MODAL
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
{{ btnLabel }}
</div>
<div class="modal-footer">
<button
ng-click="handler()"
class="btn btn-primary pull-left">
Click ME!
</button>
</div>
JAVASCRIPT
(function(angular) {
var app = angular.module('app', ['ui.bootstrap']);
app.controller('Ctrl', function($scope, $window) {
// handler function
$scope.messageHandler = function(message) {
$window.alert(message);
};
});
// directive assignment
app.directive('slEntityBrowser', slEntityBrowser);
function slEntityBrowser() {
// directive definition
return {
scope: {
btnLabel: '#',
handler: '&'
},
controller: slEntityBrowserController,
link: slEntityBrowserLink
};
}
// directive controller
function slEntityBrowserController($scope, $modal) {
// create open() method
// to open a modal
$scope.open = function() {
$modal.open({
scope: $scope,
templateUrl: 'sl-entity-browser-modal.html'
});
};
}
// directive link
function slEntityBrowserLink(scope, elem) {
// register click handler on the current element
// to open the modal
elem.on('click', function() {
scope.open();
});
}
})(window.angular);
I'm trying to implement a shortlisting functionality in a case where I'm using ng-click inside ng-repeat.
While the $index is being displayed correctly outside the ng-click, $index is only the index of the last object in the JSON array in all the cases where the html is generated using ng-repeat.
I was expecting the respective venue or venue.id to be passed as an argument to shortlistThis(). I'm guessing that this could be an issue related to event binding.
Can someone help me understand what's going wrong here and probably a better way to do this if possible.
I did try checking this Bind ng-model name and ng-click inside ng-repeat in angularjs The fiddle here works just fine but, mine doesn't.
Update: I've found something interesting here. When the shortlist button is placed just under the ng-repeat, it work just as intended. But when, nested inside a div with a ng-class, it isn't working as intended. Can anyone explain and suggest a fix for this ?
//locationsapp.js var locationsApp = angular.module('locationsApp', []);
var venues = [{
id: "Flknm",
name: "ship",
}, {
id: "lelp",
name: "boat",
}, {
id: "myp",
name: "yacht",
}, ];
var shortlistedVenues = [];
var locationsApp = angular.module('locationsApp', ['ui.bootstrap']);
locationsApp.controller("getvenues", function($scope) {
$scope.venues = venues;
$scope.shortlistThis = function(venue) {
console.log(venue);
if (shortlistedVenues.indexOf(venue) == -1) {
shortlistedVenues.push(venue);
//alert('If');
} else {
console.log('already shortlisted')
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="locations" ng-app="locationsApp">
<div ng-controller="getvenues">
<div ng-repeat="venue in venues" ng-mouseover="" class="venue">
<div ng-controller="manageInfo">
<div class="row-fluid">
<div class="control" ng-click="showInfo()">
</div>
<div class="maps" class="info">
<div ng-class="class">
<div class="close-info" ng-click="hideInfo()">
<i class="fa fa-times">
</i>
</div>
<div class="row full-venue-contents" ng-app="ui.bootstrap.demo">
<div class="">
<div class="row-fluid myclass">
<div class="button-holder">
<div class="row-fluid">
<div class="col-md-4 col-xs-4 text-center btn-grid">
<button type="button" class="btn btn-default btn-lg btn-sup" ng-click="shortlistThis(venue)">
Shortlist{{$index}}
</button>
</div>
</div>
</div>
</div>
</div>
<!-- End of Full Info Container -->
</div>
</div>
</div>
</div>
<div class="compare">
<button type="button" class="btn btn-default btn-lg btn-sup">
Compare ( {{shortlistedVenues.length}} )
</button>
</div>
</div>
</div>
</div>
</div>
The problem is with your button div which was position: fixed, it is actually showing the 1st button but clicking on it firing last button click, I'd suggest you should suggest you render only the shortlist button which has been selected by you. For that you can use ng-if and render those button which index is the same as that of selected $index
HTML
<div ng-if="selected==$index" class="button-holder">
<div class="row-fluid">
<div class="col-md-4 col-xs-4 text-center btn-grid">
<button type="button" class="btn btn-default btn-lg btn-sup"
ng-click="shortlistThis($parent.$index)">Shortlist{{$index}}</button>
</div>
</div>
</div>
& then put ng-click="selected='$index'" on ng-repeat div like
<div ng-repeat="venue in venues" class="venue" ng-click="selected=$index">
Working Fiddle
Hope this could help you, Thanks.
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);
};