I have a modal page that works if I request it with its own URL but If request it as modal, modal page popup works but angular is not working. I see {{post.name}} in name input.
I am calling my modal page with:
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/edit?brandid={{post.brandid}}" data-toggle="modal"><tags:label text="edit"/></a>
Here is my modal page:
<%#page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%#taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div id="content" class="span6" data-popup="modal">
<div class="row-fluid sortable">
<div class="box span12" ng-app="myApp">
<div class="box-content">
<form class="form-horizontal" action='/admin.brands/update' data-toggle="validate" method="post" ng-controller="PostsCtrl">
<input type="hidden" name="brandid" value="{{post.brandid}}"/>
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" value="{{post.name}}" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-checked="post.isactive" name="isactive" value="1"/>
</div>
</div>
<div class="form-actions">
<tags:label text="close"/>
<button type="submit" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var brandId = getParameterByName('brandid');
var app = angular.module('myApp', [])
.controller("PostsCtrl", function($scope, $http) {
$http.get('http://localhost/admin.brands/getJsonBrandAndEdit?brandid=' + brandId).
success(function(data, status, headers, config) {
$scope.post = data;
}).
error(function(data, status, headers, config) {
});
});
</script>
How can I make it work ? What is the problem ?
Related
Hi I need some minor direction. I can pull the data in the viewCtrl but every time i go to add a new contact, the issue I get is $http(..)then(..)catch is not a function at oBJECT.$scope.addContact I have no idea what is causing this?
Its also not allowing me to "POST" but I am able to "GET". Can anyone see whats wrong with what i am doing?
var app = angular.module('app', []);
app.controller('viewCtrl', function($scope, $http) {
var url = "https://";
$http({
method: "GET",
url: url,
headers: {
"accept": "application/json;odata=verbose"
}
}).success(function(data, status, headers, config) {
$scope.contacts = data.d.results;
console.log($scope.contacts);
}).error(function(data, status, headers, config) {});
});
app.controller('addItemsController', function($scope, $http) {
var url = "https://";
$scope.addContact = function() {
return $http({
headers: {
"Accept": "application/json; odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
},
method: "POST",
url: url,
data: {
'Lastname': $scope.Lastname,
'Firstname': $scope.Firstname
}
})
.then(saveContact)
.catch(function(message) {
console.log("addContact() error: " + message);
});
function saveContact(data, status, headers, config) {
alert("Item Added Successfully");
return data.data.d;
}
}
//console.log("an item has been added!");
});
app.controller('editItemsController', function($scope) {
$scope.editItem = function() {
console.log("an item can now be edited!");
}
});
app.controller('deleteItemsController', function($scope) {
$scope.deleteItem = function() {
console.log("item has been deleted");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">
<body ng-app="myapp">
<div ng-controller="viewCtrl">
<div ng-repeat="contact in contacts">
{{contact.ID}}: {{contact.Lastname}}, {{contact.Firstname}}
<button>Edit</button>
<button>Delete</button>
<br />
</div>
</div>
<h3>Add Contacts</h3>
<div ng-controller="addItemsController">
<div class="Table">
<div class="Row">
<div class="Cell">
First Name :
</div>
<div class="Cell">
<input type="text" id="Firstname" ng-model="Firstname" />
</div>
</div>
<div class="Row">
<div class="Cell">
Last Name :
</div>
<div class="Cell">
<input type="text" id="Lastname" ng-model="Lastname" />
</div>
</div>
<div class="Row">
<div class="Cell">
</div>
<div class="Cell">
<input type="button" id="btnAddContact" value="Add Contact" ng-click="addContact()" />
<input type="button" id="btnAddContact2" value="Add Contact" ng-click="addItem()" />
</div>
</div>
</div>
</div>
<hr />
<h3>Edit Contacts</h3>
<div ng-controller="editItemsController">
<div class="Table">
<div class="Row">
<div class="Cell">
ID :
</div>
<div class="Cell">
<input type="text" id="itemId" ng-model="itemId" />
</div>
</div>
<div class="Row">
<div class="Cell">
First Name :
</div>
<div class="Cell">
<input type="text" id="firstName" ng-model="firstName" />
</div>
</div>
<div class="Row">
<div class="Cell">
Last Name :
</div>
<div class="Cell">
<input type="text" id="lastName" ng-model="lastName" />
</div>
</div>
<div class="Row">
<div class="Cell">
</div>
<div class="Cell">
<input type="button" id="btnEditContact" value="Edit Contact" ng-click="editItem()" />
</div>
</div>
</div>
</div>
<hr />
<h3>Delete Contacts</h3>
<div ng-controller="deleteItemsController">
<div class="Table">
<div class="Row">
<div class="Cell">
ID :
</div>
<div class="Cell">
<input type="text" id="itemId" ng-model="itemId" />
</div>
</div>
<div class="Row">
<div class="Cell">
</div>
<div class="Cell">
<input type="button" id="btnDelContact" value="Delete Contact" ng-click="deleteItem()" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I see some mismatch between function on
onviewCtrl
$http(...).success(...).error(...)
while on addItemsController
$http(...).then(...).catch(...)
use which code you are available on
Here I am trying to pass user entered data in to angular function so that i can send it to server. but data is not receing in function.
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$scope.submitForm = function (data) {
console.log(data + " " + data.fname + " " + data.lname);
$http({
method: 'POST',
url: "update",
data: data,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (result) {
console.log(result);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="update">
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for=fname">First Name</label>
</div>
<div class="col-lg-8 col-md-8">
<input type=text" class="form-control" id="fname" name="fname" placeholder="First Name"
ng-bind="user.fname" data-validation="required" data-validation-error-msg="First Name required"/>
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="lname">Last Name</label>
</div>
<div class="col-lg-8 col-md-8">
<input type=text" class="form-control" id="lname" name="lname" placeholder="Last Name"
ng-bind="user.lname" data-validation="required" data-validation-error-msg="Last Name required"/>
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="submit" class="sr-only" >submit</label>
</div>
<div class="col-lg-8 col-md-8">
<input type="submit" class="form-control btn btn-success" id="update"
ng-click="submitForm(user)"
name="submit" placeholder="Submit"/>
</div>
</div>
</form>
</div>
Instead of ng-bind use ng-model
ng-bind="user.fname" ---> ng-model="user.fname",
use this for all form elements.
I am learning how to intergrate Angular in my Laravel app. But when I select values from a database table its displayed in the browser in Json format like shown:
[{"id":1,"product_name":"smart phone"},
[{"id":2,"product_name":"laptop"},
[{"id":3,"product_name":"desktop"},
[{"id":4,"product_name":"tablet"}]
I want my result in the view to look as so:
id product Name
1 Smart Phone
2 Laptop
3 Desktop
4 tablet
My productsController.php listProducts()
//List all products
public function listProducts($id = null) {
if ($id == null) {
return Product::orderBy('id', 'asc')->get();
} else {
return $this->show($id);
}
}
My show products method:
public function show($id)
{
return Product::find($id);
}
my routes.php
Route::group(array('prefix' => 'api'), function() {
Route::get('/v1/products/{id?}' ,['as'=>'productindex','uses'=>'ProductsController#listProducts']);
Route::post('/v1/products', 'ProductsController#store');
Route::post('/v1/products/{id}', 'ProductsController#update');
Route::post('/v1/products/update/{id}',['as'=>'update','uses'=> 'ProductsController#update']);
Route::delete('/v1/products/{id}', 'ProductsController#destroy');
});
My productsController.js
//public/app/controllers/productsController.js
app.controller('productsController', function($scope, $http, API_URL) {
//retrieve products listing from API
$http.get(API_URL + "products")
.success(function(response) {
$scope.products = response;
});
//show modal form
$scope.toggle = function(modalstate, id) {
$scope.modalstate = modalstate;
switch (modalstate) {
case 'add':
$scope.form_title = "Add New Product";
break;
case 'edit':
$scope.form_title = "Product Detail";
$scope.id = id;
$http.get(API_URL + 'products/' + id)
.success(function(response) {
console.log(response);
$scope.product = response;
});
break;
default:
break;
}
console.log(id);
$('#myModal').modal('show');
}
//save new record / update existing record
$scope.save = function(modalstate, id) {
var url = API_URL + "products";
//append employee id to the URL if the form is in edit mode
if (modalstate === 'edit'){
url += "/" + id;
}
$http({
method: 'POST',
url: url,
data: $.param($scope.Product),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(response) {
console.log(response);
location.reload();
}).error(function(response) {
console.log(response);
alert('This is embarassing. An error has occured. Please check the log for details');
});
}
//delete record
$scope.confirmDelete = function(id) {
var isConfirmDelete = confirm('Are you sure you want this record?');
if (isConfirmDelete) {
$http({
method: 'DELETE',
url: API_URL + 'products/' + id
}).
success(function(data) {
console.log(data);
location.reload();
}).
error(function(data) {
console.log(data);
alert('Unable to delete');
});
} else {
return false;
}
}
});
My app.js
//public/app/app.js
var app = angular.module('products', [])
.constant('API_URL', 'http://localhost/myapp/public/api/v1/');
my view
// resources/views/products/listproducts.php
<!DOCTYPE html>
<html lang="en-US" ng-app="products">
<head>
<title>Laravel 5 AngularJS CRUD Example</title>
<!-- Load Bootstrap CSS -->
<link href="<?= asset('css/bootstrap.min.css') ?>" rel="stylesheet">
</head>
<body>
<h2>Employees Database</h2>
<div ng-controller="productsController">
<!-- Table-to-load-the-data Part -->
<table class="table">
<thead>
<tr>
<th>Product Id</th>
<th>Product Name</th>
<th><button id="btn-add" class="btn btn-primary btn-xs" ng-click="toggle('add', 0)">Add New Product</button></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products">
<td>{{ product.proudct_id }}</td>
<td>{{ product.product_name }}</td>
<td>
<button class="btn btn-default btn-xs btn-detail" ng-click="toggle('edit', product.id)">Edit</button>
<button class="btn btn-danger btn-xs btn-delete" ng-click="confirmDelete(product.id)">Delete</button>
</td>
</tr>
</tbody>
</table>
<!-- End of Table-to-load-the-data Part -->
<!-- Modal (Pop up when detail button clicked) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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" id="myModalLabel">{{form_title}}</h4>
</div>
<div class="modal-body">
<form name="frmEmployees" class="form-horizontal" novalidate="">
<div class="form-group error">
<label for="inputEmail3" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control has-error" id="name" name="name" placeholder="Fullname" value="{{name}}"
ng-model="employee.name" ng-required="true">
<span class="help-inline"
ng-show="frmEmployees.name.$invalid && frmEmployees.name.$touched">Name field is required</span>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address" value="{{email}}"
ng-model="employee.email" ng-required="true">
<span class="help-inline"
ng-show="frmEmployees.email.$invalid && frmEmployees.email.$touched">Valid Email field is required</span>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Contact Number</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="contact_number" name="contact_number" placeholder="Contact Number" value="{{contact_number}}"
ng-model="employee.contact_number" ng-required="true">
<span class="help-inline"
ng-show="frmEmployees.contact_number.$invalid && frmEmployees.contact_number.$touched">Contact number field is required</span>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Position</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="position" name="position" placeholder="Position" value="{{position}}"
ng-model="employee.position" ng-required="true">
<span class="help-inline"
ng-show="frmEmployees.position.$invalid && frmEmployees.position.$touched">Position field is required</span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn-save" ng-click="save(modalstate, id)" ng-disabled="frmEmployees.$invalid">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) -->
<script src="<?= asset('app/lib/angular/angular.min.js') ?>"></script>
<script src="<?= asset('js/jquery.min.js') ?>"></script>
<script src="<?= asset('js/bootstrap.min.js') ?>"></script>
<!-- AngularJS Application Scripts -->
<script src="<?= asset('app/app.js') ?>"></script>
<script src="<?= asset('app/controllers/productsController.js') ?>"></script>
</body>
</html>
My question is what May I doing wrong. Its like the listProducts method in productsController.php is not passing results to listproducts.php. What should I do? Kindly assist.
Laravel and angular notations overlap (both blade and angular use '{{' to output variables). I had to change angular behaviour using:
app.config(['$interpolateProvider',
function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}])
I guess you can do something similar on Laravel, but I don't know how.
that problem solved, you could try and output the content of '$scope.products' in the html page, to see if it is what you expect. The response to the api call seems ok, so the problem likely lies in the angular side.
I have 2 tabs: list.brands and add.brand:
<script type="text/ng-template" id="list.brands">
<table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-controller="BrandsCtrl">
<input type="text" ng-model="searchBox">
<thead>
<tr>
<th><tags:label text="brandid"/></th>
<th><tags:label text="name"/></th>
<th><tags:label text="isactive"/></th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="actionresult{{$index + 1}}" ng-repeat="brand in brands | filter:searchBox">
<td>{{brand.brandid}}</td>
<td>{{brand.name}}</td>
<td>{{brand.isactive}}</td>
<td>
<a class="btn btn-ext-darkblue btn-ext-darkblue savestockbtn" ng-click="open(brand.brandid)"><tags:label text="edit"/></a>
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/deleteConfirm?brandid={{brand.brandid}}" data-toggle="modal" ><tags:label text="delete"/></a>
</td>
</tr>
</tbody>
</table>
</script>
<script type="text/ng-template" id="add.brand">
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" action='/admin.brands/add' data-toggle="modalform" data-popup="modal" name="brandform">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" required/>
<span ng-show="brandform.name.$error.required"> Name is required. </span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" name="isactive" value="1">
</div>
</div>
<div class="section-heading"><tags:label text="logo"/></div>
<div class="control-group">
<label class="control-label" for="textarea2"></label>
<div class="controls">
<template:file.upload dropzoneWidth="200px" dropzoneHeight="160px" maxFiles="1"></template:file.upload>
</div>
</div>
<div class="form-actions">
<tags:label text="close"/>
<button ng-disabled="brandform.name.$invalid" type="submit" class="btn btn-ext-lightblue"><tags:label text="save"/></button>
</div>
</form>
</div>
</div>
</div>
</script>
I switch them with
<div class="content-header">
<div class="row">
<div class="content-name span4">
<h3><i class="glyphicon glyphicon-bold"></i><tags:label text="brands"/></h3>
</div>
<div class="span8 button-group">
<jsp:include page="/admin/jsp/screens/help-button-inc.jsp"></jsp:include>
</div>
</div>
</div>
<div ng-app="myApp" ng-controller="TabsCtrl">
<div id="tabs" >
<ul class="nav nav-tabs content-tab-header" id="content_tab_0">
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)"><a><i class="{{tab.cssClass}}"></i><tags:label text="{{tab.title}}"/></a></li>
</ul>
</div>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
At list, I can open a modal window that contains brand details by clicking edit button in list.brands. My modal window:
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
<fields:form formName="brand.id.form">
<input type="hidden" name="brandid" value="{{item.brandid}}"/>
</fields:form>
<fields:form formName="brand.form">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" value="{{item.name}}" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-checked="item.isactive" name="isactive" value="1"/>
</div>
</div>
</fields:form>
<div class="form-actions">
<a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
<a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
</div>
</form>
</div>
</div>
</div>
and my app is here:
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller("BrandsCtrl", function($scope, $http, $controller) {
$http.get('/admin.brands/getJSONDataOfSearch').
success(function(data, status, headers, config) {
$scope.brands = data;
}).
error(function(data, status, headers, config) {
});
angular.extend(this, $controller("BrandCtrl", {$scope: $scope}));
});
app.controller("BrandCtrl", function ($scope, $http, $modal) {
$scope.animationsEnabled = true;
$scope.open = function (id) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: '/admin.brands/edit',
controller:gg,
resolve: {
item: function($http) {
return $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id)
.then(function(response) {
return response.data;
});
}
}
});
}
});
var gg = function ($scope, $modalInstance, item) {
$scope.item = item;
$scope.ok = function () {
$scope.form.brandform.submit();
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss();
};
}
app.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
title: 'list.brands',
url: 'list.brands',
cssClass: 'icon-th-list'
}, {
title: 'add.brand',
url: 'add.brand',
cssClass: 'icon-plus'
}];
$scope.currentTab = 'list.brands';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
</script>
My questions is; how can I submit my edit form in modal to a target URL and refresh the list of brands.
in angular, form has a in-built event called ng-submit. You can submit the form in either way via submit button or using enter key. on ng-submit event, you need to pass a function which must be written within your controller. in that controller you can do what ever you want to do. To use a service, go through the documentation.
Here I am attaching an working example of Form Submit with Service integrated in it (Just for your reference, I have added 2 different controllers which are sharing the same service):
Fiddle: http://jsfiddle.net/ashishanexpert/zvcx5z38/2/
I think this could help you. Thanks
$scope.open = function (id) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: '/admin.brands/edit',
controller:gg,
resolve: {
item: function($http) {
return $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id)
.then(function(response) {
return response.data;
});
}
}
});
modalInstance.result.then(function (item) {
//The function that load your data in this controller
LoadData();
})
}
I have a modal:
<%#taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%#taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
<fields:form formName="brand.id.form">
<input type="hidden" name="brandid" value="{{item.brandid}}"/>
</fields:form>
<fields:form formName="brand.form">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" value="{{item.name}}" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-checked="item.isactive" name="isactive" value="1"/>
</div>
</div>
</fields:form>
<div class="form-actions">
<a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
<a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
</div>
</form>
</div>
</div>
</div>
and its modal controller:
app.controller("BrandCtrl", function ($scope, $http, $modal) {
$scope.animationsEnabled = true;
$scope.open = function (id) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: '/admin.brands/edit',
controller:gg,
resolve: {
item: function($http) {
return $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id)
.then(function(response) {
return response.data;
});
}
}
});
}
});
var gg = function ($scope, $modalInstance, $http, item) {
$scope.item = item;
$scope.ok = function () {
$http.post('/admin.brands/updateBrandAndGetJSON', {id:$scope.brandid, name:$scope.brandname, isactive:$scope.isactive}).
success(function(data, status, headers, config) {}).
error(function(data, status, headers, config) {});
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss();
};
}
This way I can't get the input values in $http.post in $scope.ok function so I tried add ng-models to form fields in modal
<%#taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%#taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
<fields:form formName="brand.id.form">
<input type="hidden" ng-model="item.brandid" name="brandid"/>
</fields:form>
<fields:form formName="brand.form">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" ng-model="item.name" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-model="item.isactive" ng-checked="item.isactive" name="isactive" value="1"/>
</div>
</div>
</fields:form>
<div class="form-actions">
<a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
<a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
</div>
</form>
</div>
</div>
</div>
but now, I can't load values from modal controller to input fields.
ng-model and expression conflicted.
How can I load values from modal controller and get it in ok function ?
Try this,
Remove expressions used
In the controller, after setting $scope.item initiate brandid as $scope.brandid=angular.copy($scope.item.brandid);
Likewise for other fields.
OR
In your current approach you can try giving $scope.$apply() after setting $scope.item; This is an indirect approach. No need to do like this.