I'm learning Angular on my own and trying to edit book from selected table row. I select it properly, I have it as variable in scope, but something goes wrong when I try to pass it via resolve in $modal.open function.
My html, where I select a row looks like that:
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="jumbotron">
<section>
<h2>Library</h2>
<table class="table table-striped table-bordered">
<tr>
<th>
Title
</th>
<th>
Author
</th>
<th>
Genre
</th>
<th>
Year
</th>
</tr>
<tr ng-click="setSelected(book)" ng-repeat="book in books | orderBy : 'year'">
<td>
<strong>{{book.title}}</strong>
</td>
<td>
{{book.author}}
</td>
<td>
{{book.genre}}
</td>
<td>
{{book.year}}
</td>
</tr>
</table>
<div>
<button ng-click="openModal()" type="button" class="btn btn- primary">Add book</button>
<button ng-click="openEditModal()" type="button" class="btn btn- primary">Edit book</button>
</div>
</section>
</div>
</div>
</body>
</html>
Controllers of this html and modal are MyfirstController and EditModalController and are here:
angular.module('app.component1').controller('MyFirstController', function($scope, $http, $modal, response){//tu w argumentach jeszcze byly books
'use strict';
$scope.selectedBook = null;
$scope.setSelected = function (selectedBook) {
$scope.selectedBook = selectedBook;
};
$scope.books = response.data;
$scope.openModal = function () {
var modal = $modal.open({
templateUrl: '/component-1/modal-dialog/modal-dialog.tpl.html',
controller: 'MyModalController'
/*resolve: {
newBook: function() {
return;
}
}*/
});
modal.result.then(function(addedBook) {
$scope.books.push(addedBook);
});
};
$scope.openEditModal = function () {
var modal = $modal.open({
templateUrl: '/component-1/edit-dialog/edit-dialog.tpl.html',
controller: 'EditModalController',
resolve: {
selectedBook: function() {
return $scope.selectedBook;
}
}
});/*
modal.result.then(function(addedBook) {
$http.post('/component-1/books.json', addedBook);
});*/
};
}).controller('MyModalController', ['$scope', '$modalInstance', function($scope, $modalInstance, $http){ //tu w argumentach bylo jeszcze selectedBook
'use strict';
$scope.date = new Date();
//$scope.year = $scope.date.getMonth();
$scope.addedBook = {
"genre": '',
"year": $scope.date,
"title": '',
"author": ''
};
$scope.ok = function() {
$modalInstance.close($scope.addedBook);
};
}]).controller('EditModalController', ['$scope', '$modalInstance', 'selectedBook', function($scope, $modalInstance, $http, selectedBook){
'use strict';
$scope.selectedBookTitle = selectedBook.title;
$scope.selectedBookAuthor = selectedBook.author;
$scope.selectedBookGenre = selectedBook.genre;
$scope.selectedBookYear = selectedBook.year;
}]);
it is not important here, but he is my modal where I wanted the book data to be imported into inputs
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Add new book</h3>
</div>
<div class="modal-body">
<form name="modalForm">
<div class="form-group">
<label for="title">Title:</label>
<input ng-model="selectedBookTitle" ng-required="true" type="text" class="form-control" id="editTitle">
</div>
<div class="form-group">
<label for="author">Author:</label>
<input ng-model="selectedBookAuthor" ng-required="true" type="text" class="form-control" id="editAuthor">
</div>
<div class="form-group">
<label for="genre">Genre:</label>
<input ng-model="selectedBookGenre" type="text" class="form-control" id="editGenre">
</div>
<div class="form-group">
<label for="year">Release date:</label>
<datepicker min="minDate" placeholder="Set release date" show-weeks="false" id="editYear"></datepicker>
<!--<label for="year">Year:</label>-->
<!--<input ng-model="addedBook.year" ng-pattern="/^\d+$/" type="text" class="form-control" id="year">-->
</div>
</div>
<div class="modal-footer ">
<button ng-disabled="modalForm.$invalid" class="btn btn-primary">Edit book</button>
</div>
</form>
</div>
</body>
</html>
Don't look at datepickers. I need to think long about them, and how to make them working as I'd like them to.
So let's come back to the openEditModal() and resolve. I'm getting error that angular can't read property title in selectedBook.title in EditModalController or it is undefined. I'm sure I have an error in resolve in openEditModal, but I can't figure out where.
Related
Hi everyone I am starting with angularJS and I trying to add a route to an application but I am receiving nothing, I am using a directive too, I dont know if that is the problem.
So I have 5 different files and I am trying to route tripsView.html into Trips.cshtml with ng-view
I really appreciate your time and help
This is my code:
app-trip.js
"use strict";
var app = angular.module("app-trips",["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/",
{
controller: "tripsController",
//controllerAs: "trip",
templateUrl: "/views/tripsView.html"
});
$routeProvider.otherwise({ redirectTo: "/" });
});
simpleControl.js
app.directive("waitCursor", function waitCursor() {
return {
scope: {
show: "=displayWhen"
},
restrict: "E",
templateUrl: "/views/waitCursor.html"
};
});
tripsController.js
(function () {
"use strict";
app.controller("tripsController", function ($scope, $http) {
$scope.trips = [];
$scope.errorMessage = "";
$scope.isBusy = true;
$http.get("/api/trips")
.then(function(response) {
//Success
angular.copy(response.data, $scope.trips);
},
function(error) {
//Failure
$scope.errorMessage = "Failed to load data: " + error;
})
.finally(function() {
$scope.isBusy = false;
});
$scope.addTrip = function (newTrip) {
newTrip.dateCreated = new Date();
$scope.isBusy = true;
$scope.errorMessage = "";
$http.post("/api/trips", newTrip)
.then(function (response) {
$scope.trips.push(response.data);
$scope.newTrip = {};
// Success
},
function() {
// Failure
$scope.errorMessage = "Failed to save new trip";
})
.finally(function() {
$scope.isBusy = false;
});
};
});
})();
Trips.cshtml
#model IEnumerable<TheWorld.Models.Trip>
#{
ViewBag.Title = "Home Page";
}
<script src="~/lib/angular/angular.min.js"></script>
<script src="~/lib/angular-route/angular-route.min.js"></script>
<script src="~/js/app-trips.js"></script>
<script src="~/js/tripsController.js"></script>
<script src="~/js/simpleControls.js"></script>
<div ng-app="app-trips" class="row" >
<div ng-view></div>
<div class="col-md-6 #*col-xs-8*#">
<h1>The World</h1>
<p>This will be a fun website soon</p>
<form>
<div class="form-group">
<label>Date </label>
<input class="form-control" />
</div>
<div class="form-group">
<label>Location</label>
<input class="form-control" />
</div>
<div>
<input type="submit" value="Add" class="btn btn-success" />
</div>
</form>
</div>
</div>
<div class="col-md-6 #*col-xs-4*#">
<h2>The Map</h2>
#foreach (var item in Model)
{
<li> #item.Name: #item.DateCreated.ToString("d") </li>
}
</div>
tripsView.html --------------------------------------
<div class="col-md-6 col-md-offset-3">
<div class="text-danger" ng-show="errorMessage"> {{ errorMessage}}</div>
<wait-cursor display-when="isBusy"></wait-cursor>
<table class="table table-responsive table-striped">
<tr ng-repeat="trip in trips">
<td>{{ trip.name }}</td>
<td>{{ trip.dateCreated | date:'MM-dd-yyyy' }}</td>
<td>
<a
href="" class="btn btn-sm btn-primary">Manage
</a>
</td>
</tr>
</table>
<form novalidate name="newTripForm" ng-submit="addTrip(newTrip)">
<div class="form-group">
<label for="name">Trip Name</label>
<input class="form-control" type="text" id="name" value="name" ng-model="newTrip.name" required ng-minlength="5" />
</div>
<div class="form-group">
<input type="submit" value="Add" class="btn btn-success btn-sm" ng-disabled="newTripForm.$invalid" />
<span ng-show="newTripForm.$error.required" class="text-warning"> Name is required</span>
<span ng-show="newTripForm.$error.minlength" class="text-warning"> Name must be at least 5 characters</span>
</div>
</form>
</div>
This question already has an answer here:
anjularjs push value to nested ng-repeat
(1 answer)
Closed 6 years ago.
<!-- Angular.JS Form to JSON -->
var formApp = angular.module('formApp', []).controller('formController', ['$scope', function ContactController($scope) {
$scope.form = [];
$scope.milestone_subindicator = {data:'',year:'' , data:'',year:''
}
$scope.push_form = function(){
$scope.form.push({name:'',milestone:[]})
};
}]);
<!-- Form -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
{{form}}
<button type="button" class="success button" ng-click="push_form()">Add</button><!-- Add form -->
<body ng-app="formApp" ng-controller="formController">
<div class="row" ng-repeat="f in form track by $index">
<input type="text" placeholder="G1" data-ng-model = "f.name"></input> // name of the orgranisation
<div class="row" ng-repeat = "mil in milestone_subindicator track by $index"> // milestones
<div class="medium-2 columns">
<label>Data
<input type="text" placeholder="data" ng-model="mil.data">
<input type="text" placeholder="year" ng-model="mil.year">
</label>
</div>
</div>
</div>
</body>
In the example above as you can see the output of {{form}} i need to put the value of mil in milestone_subindicator to be pushed in milestone array in the form . I have no idea how do i achieve that ?
Help will be appreciated :)
Thank you guys .Finally,i found solution to my answer.
var formApp = angular.module('formApp', []).controller('formController', ['$scope', function ContactController($scope) {
$scope.form = [];
$scope.milestone_subindicator = {data:'',year:'' , data:'',year:''
}
$scope.push_form = function(){
$scope.form.push({name:'',milestone:[]})
};
$scope.push_cat = function(index,data){
console.log(data);
$scope.form[index].milestone.push(data);
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
{{form}}
<button type="button" class="success button" ng-click="push_form()">Add</button>
<body ng-app="formApp" ng-controller="formController">
<div class="row" ng-repeat="f in form track by $index">
<input type="text" placeholder="G1" data-ng-model = "f.name"></input>
<div class="row" ng-repeat = "mil in milestone_subindicator track by $index">
<div class="medium-2 columns">
<label>Data
<input type="text" placeholder="data" ng-model="mil.data">
<input type="text" placeholder="year" ng-model="mil.year">
</label>
</div>
<button ng-click="push_cat($parent.$index,mil)">add cat</button>
</div>
</div>
</body>
I have the below AngularJS controller and service modules. Basically what I wanted to do is to refresh custController.allCustomers after creating a new customer so that the new customer is showing up on the UI.
However, whenever I call custController.createCustomer, the data in allCustomers never has the new customer. I suspect there is something wrong in the way I use promise. Could you please help?
controlers.js
angular.module('CustomerModule')
.controller('CustomerController', function ($log, CustomerService) {
console.log("CustomerController initializing");
var custController = this;
custController.newCustomer = {};
custController.refresh = function () {
CustomerService.getAllCustomers().success(function (response) {
custController.allCustomers = response;
});
custController.newCustomer = {};
};
custController.createCustomer = function (customer) {
CustomerService.createCustomer(customer).success(function (response) {
custController.refresh();
});
};
custController.refresh();
});
The Service module (services.js)
angular.module('CustomerModule')
.service('CustomerService', function ($http) {
var service = this;
service.getAllCustomers = function () {
return $http.get("http://localhost:8080/customers");
};
service.createCustomer = function (customer) {
console.log("Creating customer ", customer);
return $http.post("http://localhost:8080/customers", customer);
};
});
Add the rest code in case they help:
app.js
var app = angular.module('CustomerModule', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '../dashboard.html',
controller: 'CustomerController',
controllerAs: 'custController'
})
.when('/dashboard', {
templateUrl: '../dashboard.html',
controller: 'CustomerController',
controllerAs: 'custController'
})
.otherwise({redirectTo: '/'});
}]);
index.html
<!DOCTYPE html>
<html lang="en" ng-app='CustomerModule'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#/dashboard">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div ng-view></div>
<script type="text/javascript" src="./app/app.js"></script>
<script type="text/javascript" src="./app/services.js"></script>
<script type="text/javascript" src="./app/controllers.js"></script>
</body>
</html>
dashboard.html
<div class="container">
<div class="page-header"><h2>All Customers</h2></div>
<table class="table table-striped">
<thead>
<td>Name</td>
<td>Contact</td>
<td>Address</td>
<td>Email</td>
<td>Action</td>
</thead>
<tr ng-repeat='customer in ::custController.allCustomers'>
<td>{{::customer.name}}</td>
<td>{{::customer.contact}}</td>
<td>{{::customer.address}}</td>
<td>{{::customer.email}}</td>
<td>
</span>
<a ng-click='custController.deleteCustomer(customer)'><span class="glyphicon glyphicon-trash"></span></a>
</td>
</tr>
</table>
</div>
<div class="container">
<div class="page-header"><h2>Create a Customer</h2></div>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label" for="inputName">Name</label>
<div class="controls">
<input type="text" class="form-control" id="inputName" placeholder="Name"
ng-model="custController.newCustomer.name"/>
</div>
</div>
<div class="form-group">
<label class="control-label" for="inputContact">Contact</label>
<div class="controls">
<input type="text" class="form-control" id="inputContact" placeholder="Contact"
ng-model="custController.newCustomer.contact"/>
</div>
</div>
<div class="form-group">
<label class="control-label" for="inputAddress">Address</label>
<div class="controls">
<input type="text" class="form-control" id="inputAddress" placeholder="Address"
ng-model="custController.newCustomer.address"/>
</div>
</div>
<div class="form-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" class="form-control" id="inputEmail" placeholder="Email"
ng-model="custController.newCustomer.email"/>
</div>
</div>
<a class="btn btn-primary" ng-click="custController.createCustomer(custController.newCustomer)">
<span class="glyphicon glyphicon-plus"></span>
</a>
</form>
</div>
You are using the "one time" binding expressions in your HTML. Per the documentation:
An expression that starts with :: is considered a one-time expression. One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value (see value stabilization algorithm below).
This is not "one way" binding where the value only updates in one direction. This is is going to stop updating the view after the value has "stablized" (is not undefined).
I want to create a application which show the data of people and once the single person is clicked it has to show the details of the person.
I have created id for json file using (index of json) but I don't know how to pass the seperate id to the popup function.
<div class="content-wrapper" ng-controller="ListController">
<section class="content">
<!-- /.box-header -->
<div class="box-body table-responsive no-padding">
<div ng-controller="MainCtrl" class="container">
<!--controller="MainCtrl"-->
<table class="table table-hover" ng-model="artists">
<tr>
<th>Name</th>
<th>Profile</th>
<th>First Name</th>
<th>Date</th>
<th>Status</th>
<th>Reknown</th>
</tr>
<tr ng-repeat="item in artists | filter: query | orderBy: artistOrder:direction" id="table-cursor">
<modal title="{{artists.indexOf(item)}}" visible="showModal">
<form role="form">
<div class="form-group">
<label for="text">Name</label>
<input type="text" class="form-control" id="email" placeholder="Name" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" />
</div>
<button type="submit" class="btn btn-default">Send</button>
</form>
</modal>
<td ng-click="toggleModal(artists.indexOf(item))"><span value="{{artists.indexOf(item)}}"></span>{{item.name}}</a>
</td>
<td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}">
</span>
<img ng-src="images/{{item.shortname}}_tn.jpg" width="35" height="35" alt="profile">
</td>
<td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span>
<h5>{{item.shortname}}</h5>
</td>
<td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span>11-7-2014</td>
<td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span><span class="label label-success">Approved</span>
</td>
<td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span>{{item.reknown}}</td>
<tr>
</table>
</div>
<!--controller="MainCtrl"-->
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
var myApp = angular.module('myApp', [
'ngRoute',
'myApp'
]);
myApp.controller('ListController', ['$scope', '$http', '$routeParams',
function($scope, $http, $routeParams) {
$http.get('angular/data.json').success(function(data) {
$scope.artists = data;
$scope.artistOrder = 'name';
$scope.whichItem = $routeParams.itemId;
});
}
]);
myApp.controller('MainCtrl', ['$scope', '$http', '$routeParams',
function($scope, $http, $routeParams) {
$http.get('angular/data.json').success(function(data) {
$scope.showModal = false;
$scope.artists = data;
$scope.whichItem1 = $routeParams.itemId;
$scope.toggleModal = function() {
$scope.showModal = !$scope.showModal;
};
});
}
]);
myApp.directive('modal', function() {
return {
template: '<div class="modal">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace: true,
scope: true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value) {
if (value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = false;
});
});
}
};
});
you need to recieve your index in the method toggleModal:
$scope.toggleModal = function($index) {
// here you need to get the user info and
//set the result to $scope variable that you can you into the modal
$scope.userInfo = $scope.artists[$index];
};
Then you could use the userInfo by editing your HTML like that:
<div class="form-group">
<label for="text">Name</label>
<input type="text" class="form-control" id="email" placeholder="Name" value="{{userInfo.name}}"/>
</div>
Edit:
HTML tag "modal " with attribute "visible= true" gives angular [$rootScope:inprog] error and actually I'm reaching for the reason for this. So I highly recommend you to use the standard bootstrap modal window. Just replace your "modal" html
<modal title="{{artists.indexOf(item)}}" visible="showModal">
<form role="form">
...
</form>
</modal>
with the following:
<!-- Modal -->
<div id="myModal" 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">Chat box</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="text">"name"</label>
<input type="text" class="form-control" id="email" placeholder="Name" ng-value="userInfo.name"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" value="{{userInfo.password}}"/>
</div>
<button type="submit" class="btn btn-default">Send</button>
</form> </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Then you can show it from your controller just like this:
$scope.toggleModal = function($index){
$("#myModal").modal({show: true});
$scope.userInfo=$scope.artists[$index];
};
I hope this helps :)
Edit:
If you want to open dialog modal without affecting the background, just you need to get rid of the "backdrop". So, After modal initiation
$("#myModal").modal({show: true});
just add the code below
$('.modal-backdrop').removeClass("modal-backdrop");
$('#myModal').css('display', 'table')
I am new in angularjs. I want to add data in database and to show in a table.There is one input name field and one image field.
my html is
service.html:
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="addservices" class="modal fade">
<form role="form" name="myForm" ng-submit="submitCuisine(myForm.$valid)" novalidate>
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add Service</h4>
</div>
<div class="modal-body" ng-class="{ 'has-error' : myForm.cat.$invalid && myForm.cat.$touched }">
Category <input type="text" name= "cat" id= "cat" ng-model="dataform.cat" autocomplete="off" class="form-control placeholder-no-fix">
</div><br>
<div class="modal-body" ng-class="{ 'has-error' : myForm.name.$invalid && myForm.name.$touched }"> Service Name<input type="text" name= "name" id= "name" ng-model="dataform.name" autocomplete="off" class="form-control placeholder-no-fix"></div>
<div class="modal-body" ng-class="{ 'has-error' : myForm.desc.$invalid && myForm.desc.$touched }"> Description<input type="text" name= "desc" id= "desc" ng-model="dataform.desc" autocomplete="off" class="form-control placeholder-no-fix"></div>
<div class="modal-body" ng-class="{ 'has-error' : myForm.cost.$invalid && myForm.cost.$touched }"> Cost($)<input type="text" name= "cost" id= "cost" ng-model="dataform.cost" autocomplete="off" class="form-control placeholder-no-fix"></div>
<div class="modal-body" ng-class="{ 'has-error' : myForm.servicetime.$invalid && myForm.servicetime.$touched }"> Time(min)<input type="text" name= "servicetime" id= "servicetime" ng-model="dataform.servicetime" autocomplete="off" class="form-control placeholder-no-fix"></div>
<div class="modal-body"> Image <input type="file" file-input="files" name="file"/>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
<button class="btn btn-success" type="submit" ng-disabled="myForm.$invalid">Submit</button>
</div>
</div>
</div>
</form>
</div>
addserviceController.js
app.controller('addserviceController', function ($scope,$http,$cookieStore) {
$scope.submitCuisine=function(isvalid){
if(isvalid){
var fd=new FormData();
angular.forEach($scope.files,function(file){
fd.append('file',file);
});
fd.append('formdata',JSON.stringify($scope.dataform));
$http.post('admin/managecuisineAdd',fd,{
access_token : $cookieStore.get('obj').accesstoken,
transformRequest:angular.identity,
headers:{'Content-type':undefined}
}).success(function(data){
$scope.status=data;
$scope.itemlist.push(data)
$scope.message="New Dish Added Successfully"
});
}
}
});
app.js
(function(window){
var app= angular.module('customersApp',['ngRoute','ngCookies','ui.bootstrap']);
app.directive("fileInput",['$parse',function($parse){
return{
restrict:'A',
link:function(scope,ele,attrs){
ele.bind('change',function(){
$parse(attrs.fileInput).
assign(scope,ele[0].files)
scope.$apply()
});
}
}
}]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
controller: 'loginController',
templateUrl: 'app/views/loginuser.html'
})
.when('/logout', {
title: 'Logout',
templateUrl: 'partials/login.html',
controller: 'loginController'
})
.when('/dashboard', {
title: 'Dashboard',
templateUrl: 'app/views/dynamic_table.html',
controller: 'dashboard'
})
.when('/verified_artists', {
title: 'Verified Artists',
templateUrl: 'app/views/verified_artists.html',
controller: 'artistController'
})
.when('/new_artists', {
title: 'New Request Artists',
templateUrl: 'app/views/new_artists.html',
controller: 'verifyartistController'
})
.when('/services', {
title: 'Services',
templateUrl: 'app/views/services.html',
controller: 'serviceController'
})
.when('/addservices', {
title: 'Services',
templateUrl: 'app/views/services.html',
controller: 'addserviceController'
})
}]);
window.app = app;
}(window));
I have made one controller addserviceController.js. I want that when I click on Submit button, it will go to controller where I will hit an api but I don't know how to send data of name and image field and also help me what I will write in controller.Please tell me how to get data of input field and pass to the controller where it will hit an api so that data will save to database.
You should use the $http service to make AJAX requests or interact with a RESTful Service.
More detail how to use $http service is here.
Here is the code what i did in my project to upload image and data:-
HTML PAGE :-
<form role="form" name="myForm" ng-submit="submitCuisine(myForm.$valid)" novalidate>
<div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && myForm.name.$touched }">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name"
placeholder="Name of cuisine" ng-model="dataform.name" required>
</div>
<div class="form-group" ng-class="{ 'has-error' : myForm.description.$invalid && myForm.description.$touched }">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" name="description"
placeholder="Description for cuisine" ng-model="dataform.description" required>
</div>
<div class="form-group" ng-class="{ 'has-error' : myForm.category.$invalid && myForm.category.$touched }">
<label for="description">Category</label>
<select class="form-control" ng-model="dataform.category" id="category" name="category" required>
<option>Veg</option>
<option>Non-veg</option>
</select>
</div>
<div class="form-group" ng-class="{ 'has-error' : myForm.subcategory.$invalid && myForm.subcategory.$touched }">
<label for="description">Sub-Category</label>
<select class="form-control" ng-model="dataform.subcategory" id="subcategory" name="subcategory" required>
<option>Main Course</option>
<option>Staters</option>
</select>
</div>
<div class="form-group" ng-class="{ 'has-error' : myForm.price.$invalid && myForm.price.$touched }">
<label for="description">Price</label>
<span class="fa fa-dollar"></span>
<input type="number" class="form-control" id="price" name="price"
placeholder="Price" ng-model="dataform.price" required>
</div>
<div class="form-group">
<label for="description">Image</label>
<input type="file" file-input="files" name="file"/>
</div>
<button class="btn btn-primary" type="submit" ng-disabled="myForm.$invalid"> Submit</button>
</form>
Controller:-
$scope.submitCuisine=function(isvalid){
if(isvalid){
var fd=new FormData();
angular.forEach($scope.files,function(file){
fd.append('file',file);
});
fd.append('formdata',JSON.stringify($scope.dataform));
$http.post('admin/managecuisineAdd',fd,{
transformRequest:angular.identity,
headers:{'Content-type':undefined}
}).success(function(data){
$scope.status=data;
$scope.itemlist.push(data)
$scope.message="New Dish Added Successfully"
});
}
}
Directive :-
myApp.directive("fileInput",['$parse',function($parse){
return{
restrict:'A',
link:function(scope,ele,attrs){
ele.bind('change',function(){
$parse(attrs.fileInput).
assign(scope,ele[0].files)
scope.$apply()
});
}
}
}]);
Ok, I thought you could use angular-ui and the modal from bootstrap there.
This example is the one from http://angular-ui.github.io/bootstrap/ modificated for your needs.
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
< div class = "modal-header" > < h3 class = "modal-title" > I 'm a modal!</h3>
</div>
<div class="modal-body">
<label>Your Variable
<input ng-model="variable" />
</label>
<p>Variable: <b>{{ variable }}</b></p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="variable">Variable input from a modal: {{ variable }}</div>
</div>
</body>
</html>
and your javascript:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $modal, $log) {
$scope.variable = "initial value";
$scope.open = function(size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
variable: function() {
return $scope.variable;
}
}
});
modalInstance.result.then(function(variable) {
//your special processing here
$scope.variable = variable.toUpperCase();
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $modalInstance, variable) {
$scope.variable = variable;
$scope.ok = function() {
$modalInstance.close($scope.variable);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
});
I'm doing the same here and everything is working fine.
working demo:
http://plnkr.co/edit/yXEGPXejWdlLrniDGQs5?p=preview