how to send data from angular function to codeigniter view to model - angularjs

$scope.editrc = function(id)
{
$http.get('admissionsourcecontroller/editadID/'+id).then(function(data) {
console.log(data);
$scope.form = data;
});
}
I have created one angularjs function, when I click on button I gets id of that record then I'll pass to codeigniter controller
public function editadID($id)
{
$query = $this->db->select('Name,id')
->where('MasterValueID', $id)
->get('blog');
echo json_encode($query->row());
}
I have get result of that record
My view file is
<div class="modal fade" id="edit-data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="POST" name="editItem" role="form" ng-submit="saveEdit()">
<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">Edit Registration</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input ng-model="form.Name" type="text" placeholder="Name" name="title" class="form-control" required />
</div>
</div>
</div>
Now I want to send all data to view for model, how ??

you may use JSON with $http.post
$http({
method: 'POST',
url: 'admissionsourcecontroller/editadID/',
data: form, //this is where you set the data object you want to send
}).then(
function(res) {
console.log('succes !');
//do something here
},
function(err) {
console.log('error...');
}
);

Angularjs is a client side MVC framework which runs on javascript.
Similarly, CodeIgniter is a Server side MVC Framework that runs on php.
There can be ways to pass data from angular to CIModel as you are searching for it. But the ideal way to do it, following the best practices is to not to use the CI on client side at all.
Making 2 folders
Client
Server
in the root of your project directory.
Setup the Angularjs in your client. Code its views controllers and factories.
Setup CI in your server folder. Configure your database with your CIModels and make different controllers on the basis of the modules you make on the client side.
Now make request from clientside factories to the server side controllers. That is, APIs.
Do the data passing by JSON or XML whatever suits you.
That will be the optimum use of both.

Related

AngularJS: ng-class not refreshing when Bootstrap modal re-opens

I have a Bootstrap modal with a form inside a div set with ng-class:
<div id="modalNewOrder" class="modal fade" data-modalName="order" role="dialog" ng-controller="NewOrderController as NewOrderCtrl">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close pull-left" data-dismiss="modal">X</button>
<h4 class="modal-title">
New order
</h4>
</div>
<div class="modal-body">
<div ng-class="NewOrderCtrl.position">
<form>
// input text here
</form>
When the modal is loaded, its NewOrder.position sets its css to center. When the form is processed, NewOrder.position is updated to top, and the results of are shown below it.
Now the problem: I want NewOrder.position to be reset to center when the modal is re-opened. However, even if I reset NewOrder.position, it seems the ng-class is not being updated. How do I do that?
I'm using this on my controller, but its not working to update ng-class:
$("#modalNewOrder").on("hidden.bs.modal", function () {
$(this).find('form')[0].reset();
self.clearQuery();
self.position = "mycss-position-center";
});
***** UPDATE *****
Following Naren's suggestion and experimenting a little, I've updated my code. In my html I have:
<div ng-class="{'mycss-position-top' : NewOrderCtrl.top, 'mycss-position-center' : !NewOrderCtrl.top}">
and
<form ng-submit="processing()">
And in my controller, I have:
var self = this;
self.top = false;
$("#modalNewOrder").on('shown.bs.modal', function() {
self.top = false;
});
$("#modalNewOrder").on("hidden.bs.modal", function () {
self.top = false;
});
self.processing = function(){
self.top = true;
};
The problem now is that in the first re-opening of the modal, self.top is evaluated as "true", even if the "on show" function is processed and show "false" in console.log. Only if I close the modal again and re-open it once more, then it goes do false.
* UPDATE *
The proposed solution was working. I've found a syntax error in another place which was causing this last wrong behavior.
Final Answer:
Please don't use JQuery plugins in angular, angular does not detect the functions or variable changes. If you google the plugin name with angular (angular bootstrap) you will run into a library that enables you to use Bootstraps functionality with angular itself (angular UI Bootstrap). This is the proper way of writing code, If you use JQuery function, even if you solve and issue like this, you will run into another issue (because angular cannot detected the changes completely), Please do some research for a angular plugin before going with the Pure JQuery plugin approach.
JSFiddle Demo
Old Answer:
Why not always center the form as default and on form submit update the corresponding class.
HTML:
<div id="modalNewOrder" class="modal fade" data-modalName="order" role="dialog" ng-controller="NewOrderController as NewOrderCtrl">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close pull-left" data-dismiss="modal">X</button>
<h4 class="modal-title">
New order
</h4>
</div>
<div class="modal-body">
<div class="mycss-position-center" ng-class="{'mycss-position-top' : process}">
<form ng-submit="processing()">
// input text here
</form>
JS:
app.controller('NewOrderController', function($scope) {
$scope.process = false;
$scope.processing = function(){
$scope.process = true;
};
});
I thinks your ng-class is not initialisation when you call boostrap modal.
You can use watch syntax like that:
$scope.$watch(' NewOrder.position', function () {
$scope.NewOrder.position = "mycss-position-center";
}, true);
Some thing like that..

406 (Not Acceptable) Error when i try to open a ngBootbox with html template

I have an angular app with Web Api in ASP.NET. When I'm working locally the app show the ngBootbox correctly, but when I run the app fom the server (IIS 7.5), chrome returns a 406 (Not acceptable) error. In network tab in developer tools I have the next result when I try to call the ngBootbox:
This is the result I get when i call the ngBootbox
I've tried all the possible solutions that I found on the internet like add a MIME type in IIS Manager and I tried to use different ways to call a modal window but nothing worked.
I have another ngBootbox that works fine but that one doesn't use a html template
I've also tried to use ngDialog and $uibModal to show a modal window but is the same thing.
I'm so desperate to find a solution, I will be so thankful with you.
Note: This is my first post here, and I don't know if I did my question correctly.
Ok, here is the button I'm using to call the ngBootbox window:
<button class="btn btn-lg btn-primary"
ng-bootbox-title="Registrar Llamada"
ng-bootbox-custom-dialog
ng-bootbox-custom-dialog-template="templates/calls.html"
ng-bootbox-buttons="buttons"
ng-click="setClientInfo(client.Id, client.Nombre)">
<i class="fa fa-phone"></i>
</button>
Here is the template I'm using in "ng-bootbox-custom-dialog-template":
<div class="card" ng-controller="callController">
<div class="card-body card-padding">
<div>
<toaster-container toaster-options="{'time-out': 3000, 'close-button':true, 'position-class': 'toast-bottom-right'}"></toaster-container>
</div>
<div class="form-group" style="position:relative; top:30px; left:20px;">
<div class="fg-line">
<md-input-container class="md-block; col-sm-5;" flex-gt-sm>
<label>Cliente</label>
<input type="text" ng-model="client.ClientName" ng-disabled="true">
</md-input-container>
</div>
<div class="fg-line">
<md-input-container class="md-block; col-sm-5;" flex-gt-sm>
<label>Fecha de Llamada</label>
<input type="text" ng-model="date" ng-disabled="true">
</md-input-container>
</div>
<div class="fg-line">
<md-input-container class="md-block; col-sm-5;">
<label>Observaciones</label>
<textarea required="true" ng-model="call.Observations" md-maxlength="200" rows="4" md-select-on-focus style="width: 380px;"></textarea>
</md-input-container>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-primary" ng-click="saveCall(call)" style="position:relative; top:-15px; left:05px;"><i class="fa fa-phone"></i>&nbspRegistrar Llamada</button>
</div>
</div>
</div>
</div>
And here is my app.js:
var app = angular
.module('RDash', [
'ui.bootstrap',
'ui.router',
'ngCookies',
'ngMessages',
'ngAnimate',
'toaster',
'ngDialog',
'datatables',
'datatables.buttons',
'ngMaterial',
'ngBootbox',
'nvd3'
]).config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common["X-Requested-With"];
$httpProvider.defaults.headers.common["Accept"] = "application/json";
$httpProvider.defaults.headers.common["Content-Type"] = "application/json";
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.put = {};
$httpProvider.defaults.headers.patch = {};
$httpProvider.useApplyAsync(true);
}]);
I think i'm missing something in .config but im not sure...
It means in your request you are sending accept header with some value but server (API) is generating response in format not acceptable by client. e.g. If your request contains accept header as application/xml and server (API) is generating response of type application/json that means response generated by server is not acceptable by client as its accepting response only in application/xml format. Check what value of "Accept" header you are sending and in what format api is generating response.

how to update all instances of the same controller

I know how to share data between controllers using service but this case is different so please rethink the question.
I have something like this for the UI:
<jsp:include page="../home/Header.jsp" />
<div data-ng-view></div>
<jsp:include page="../home/Footer.jsp" />
Inside the ng-view, I instantiated a controller instance using "data-ng-controller="BuildController as ctrl". It will run this function that might take up to 2 hours. After it's completed, the buildCompletionMsg is updated and pop up a box saying it's completed.
self.buildServers = function(servers, version) {
BuildService.buildList(servers, version).then(
function(data) {
self.buildCompletionMsg = data;
$('#confirmationModal').modal('show');
},
function(errResponse) {
console.error("Error getting servers." + errResponse);
}
);
};
The problem is that I want the modal to be in the Header.jsp file so doesn't matter which view the user is in, they would see the notification. Therefore in Header.jsp I have another controller instance using "data-ng-controller="BuildController as ctrl" and bind it using
<div data-ng-controller="BuildController as ctrl">
<div class="modal fade" id="confirmationModal" role="dialog" aria-labelledby="confirmLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<h3>{{ ctrl.buildCompletionMsg }}</h3>
</div>
</div>
</div>
</div>
</div>
As you can see, even if I do something like:
self.buildCompletionMsg = BuildService.getCompletionMsg();
it would only update the ctrl instance of the ng-view page, and the one inside Header.jsp is still null.
How can I update all the instances of BuildController in different pages or just update the one in the Header.jsp file?
I found the answer to my own question. The solution is to to have an object reference or array in the service (it does not work for simple string) like this:
angular.module('buildModule').factory('BuildService', ['$http', '$q', function($http, $q) {
var self = {};
self.completionStatus = { data: "" };
then upon $http success update the completionStatus
self.status.data = response.data;
And in the controller, the variable is set directly to this object
self.buildCompletionMsg = BuildService.completionStatus;
This updates the variable {{ buildCompletionMsg }} on all the pages.

Updating and deleting one record within object

I'm trying to create a system in which I can display, edit and delete information on players and teams using angular along with a RESTful API. I have the parts working in which I show all the data and post data to the database.
The part I am having trouble with is updating data as I can't manage to get the http put working with the correct data being sent.
HTML
<script type="text/ng-template" id="team-single.html">
<div class="team-box">
<div class="badge">
<img ng-src="images/{{x.club_name}}.png" width="100" height="100"></div>
<div ng-hide="editorEnabled">
<div class="team-name">{{x.club_name}}</div>
<p><b>Manager:</b> {{x.club_manager}}</p>
<p><b>Ground:</b> {{x.club_ground}}</p>
<p><b>Nickname:</b> {{x.club_nickname}}</p>
<div class="team-p">{{x.club_info}}</div>
Edit Team
</div>
<div ng-show="editorEnabled">
<p><input ng-model="x.club_name"></p>
<p><input ng-model="x.club_manager"></p>
<p><input ng-model="x.club_ground"></p>
<p> <input ng-model="x.club_nickname"></p>
<p><input ng-model="x.club_info"></p>
<input type="hidden" name="id" ng-value="" />
Save
</div>
</script>
<div class="row teams">
<div class="container">
<div class="col-md-4" ng-repeat="x in teams" ng-include="'team-single.html'"></div>
</div>
JS
var app = angular.module('footballApp', []);
app.controller("TeamCtrl", function ($scope, $http) {
$scope.updateTeam = function () {
$http({
method: 'PUT',
url: 'clubs.php/teams/' + id,
data: ??,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
};
});
I have enabled an editor on the front end to edit the fields. I don't know how to pass the one object being edited back into the updateTeam function while not passing the entire team array.
Also in the HTTP PUT, I have to use the id field of the relevant club in the URL but I'm not sure how to send this back.
Any help would be greatly appreciated.
To solve your problem you might need to rethink your UI. Why do you want to show edit option for all teams at once in the UI. Ideally you should show the team details along with an option to edit them.
When user click on edit call a function with team data and then show a form where those details can be edited and later can be send for submission.
Refer to this plnkr example https://plnkr.co/edit/muqnmIhO77atLyEHS9y7?p=preview
<div class="row">
<div class="col-xs-6 col-lg-4" ng-repeat="team in teams">
<h2>{{ team.club_name }}</h2>
<p>{{ team.club_info }}</p>
<p><a class="btn btn-default" ng-click="onEditDetails(team)" href="javascript:void(0);" role="button">Edit details »</a></p>
</div>
</div>
and then in controller
$scope.onEditDetails = function(team) {
$scope.team = team;
};
This will give you the reference of current selected team. You can use $scope.team then to show a form in UI which can be submitted along with its new edited data.
Note: In your example you are using a template to show HTML in UI but since they are in a ng-repeat each of your template will be using the last variable of loop. A template included using ng-include doesn't create a different scope for each of your team in teams.
If you want to create reusable HTML (though un-necessary as per your requirement) you can create a directive and include it in your ng-repeat as <my-team-directive data="x"></my-team-directive>

How to create tooltip using AngularJS?

Once user select value from tree dropdown I want to call service for tool-tip associated with label to show description of the selected text in the input field. How can i achieve the task using AngularJS tool-tip feature and get the description. I am new to AngularJS any detail help will be appreciated.
So far tried Code..
Ctrl.js
<div class="form-group col-md-6 fieldHeight">
<label for="erh" class="col-md-5 required">Enterprise Reporting Hierarchy:
<span ng-mouseover="tooltip={{erhHirachyInfo.erhToolTip}}"
class="glyphicon glyphicon-info-sign pull-right"></span>
</label>
<div class="col-md-7">
<div multiselect-dropdown-tree ng-model="nonPersistentProcess.erhKey"
options="erhTreeviewOptions">
</div>
</div>
service.js
return $resource('app/prcs/rest/process/getERhHirachyInfo/:id', {}, {
'query': {
method: 'GET'
},
'get': {
method: 'GET'
}
});
The Angular team developped a directive for this purpose:
https://angular-ui.github.io/bootstrap/#/tooltip
http://getbootstrap.com/javascript/#tooltips

Resources