We Keep Coding

AngularJS set default value in dropdown

I am using below code.
HTML code
<form name="profInfoForm" ng-submit="saveInfo(profInfoForm)" novalidate>
<div class="wrapper">
<div class="container">
<section class="main-ctr">
<div class="error-msg" ng-show="showErrorMsg">
<div class="text">Please fix the validation error(s) below and try again.<br />{{serviceErrorMsg}}</div>
</div>
<div ng-include="'views/header.html'"></div>
<main class="sm-main">
<section class="fix-section">
<h1>Professional information</h1>
<div class="lg-form">
<div class="form-group">
<label class="text-label lg-label">Salutation</label>
<div class="select-wrap lg-select">
<select class="form-input select" name="salutation" required ng-init="profInfo.salutation = item[0]"
ng-options="item.name as item.name for item in salutations"
ng-model="profInfo.salutation">
</select>
<div class="error" ng-show="profInfoForm.$submitted || profInfoForm.salutation.$touched">
<span ng-show="profInfoForm.salutation.$error.required">Required Field</span>
</div>
</div>
</div>
</div>
</section>
<div class="clear"></div>
<div class="button-ctr">
<button class="button" ng-class="profInfoForm.$valid ? 'active' : 'disable'">Next</button>
</div>
</main>
</section>
</div>
</div>
<div id="loading" ng-if="showLoader">
<img src="images/loader.gif" id="loading-image">
</div>
</form>
My constant.js
.constant('APP_CONSTANTS', {
SALUTATIONS: [{ id: 0, name: 'Select' }, { id: 1, name: 'Mr.' }, { id: 2, name: 'Mrs.' }, { id: 3, name: 'Miss' }, { id: 4, name: 'Dr.' }, { id: 5, name: 'Ms'}]
})
Controller code is given below
.controller('professionalInfoCtrl', ['$rootScope', '$scope', '$state', 'globalService', 'APP_CONSTANTS', 'dataServices', function ($rootScope, $scope, $state, globalService, APP_CONSTANTS, dataServices) {
$scope.showLoader = false;
$scope.profInfo = userData;
$scope.salutations = APP_CONSTANTS.SALUTATIONS;
}])
I want to set default value of Salutation drop down list.
For this I am using ng-init but this is not working. I did not to find out the problem.

Please consider using ui-select of AngularUI:
<ui-select ng-model="$parent.company">
<!-- using $parent - https://github.com/angular-ui/ui-select/issues/18 -->
<ui-select-match>{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="company in companies>{{company.name}}</ui-select-choices>
</ui-select>

I resolved my issue by using below code
<select class="form-input select" ng-model="profInfo.salutation" required
ng-options="item.name as item.name for item in salutations">
<option value="">Select salutation...</option>
</select>
<div class="error" ng-show="profInfoForm.$submitted || profInfoForm.salutation.$touched">
<span ng-show="profInfoForm.salutation.$error.required">Required Field</span>
</div>
As simple I am using
<option value="">Select salutation...</option>
Thanks everyone.

Angular $apply does not update the view

I have a form, when I submit it, it pushes some object to my array. Beneath that form I have a table that shows all items in that array. I want my table to update automatically (without refreshing the page) when new item pushed.
Submit button:
<button type="submit" class="btn btn-default" ng-click="updateTable()">Pay</button>
In my controller:
$scope.updateTable = function() {
setTimeout(function () {
$scope.$apply();
$scope.$digest();
}, 0);
};
However, it does not work.
I tried different approaches like $watch service, but i`ve got the same result.
Table
<div class="row paytable">
<div class="col-xs-10 col-xs-offset-1">
{{payments.length}}
<table class="table table-hover ">
<tr>
<td>Id</td>
<td>Amount</td>
<td>Cause</td>
</tr>
<tr ng-repeat="item in payments">
<td>{{item.id}}</td>
<td>{{item.amount}}</td>
<td>{{item.cause}}</td>
</tr>
</table>
</div>
</div>
Controller
app.controller('mainController', [ 'user', '$rootScope', '$scope', 'payment', '$timeout', function(user, $rootScope, $scope, payment, $timeout) {
user.getUsers();
user.newUser();
$rootScope.currentUser = user.currentUser();
$scope.payments = payment.getPayments();
$scope.newPayment = payment.newPayment;
$scope.updateTable = function() {
setTimeout(function () {
console.log('apply ------------');
$scope.$apply();
$scope.$digest();
}, 0);
};
$scope.showPayMessage = function() {
console.log('im here');
$scope.showSM = true;
$timeout(function() {
$scope.showSM = false;
}, 2000);
};
}]);
payment - my service for array manipulation.
Form
<div class="newpay row" >
<div class=" col-xs-10 col-xs-offset-1">
<h1>Hello, {{currentUser.name}}</h1>
<h4 ng-show="showSM" class="bg-success">Payment confirmed</h4>
<form name="inputform" ng-submit="newPayment(amount, cause); showPayMessage();">
<div class="form-group">
<label for="exampleInputEmail1">Amount</label>
<input type="number" name="amount" ng-model="amount" class="form-control" id="exampleInputEmail1" placeholder="Amount" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Cause</label>
<input type="text" name="cause" ng-model="cause" class="form-control" id="exampleInputPassword1" placeholder="Cause" required>
</div>
<button type="submit" class="btn btn-default" ng-click="updateTable()">Pay</button>
</form>
</div>
</div>
payments: {{payments.length}}
<payments-table payments="payments"></payments-table>
To display that table I created directive.

$scope.$apply and $scope.$digest are better suited for working with 3rd party libraries or testing. In your case Angular is well aware to your changes. The thing is, your payments array, that resides in a service should be queried again after submitting a new item (unless you have a direct reference to the array, then no query should be made).
Like this:
View
<form name="inputform" ng-submit="onSubmit()">
Controller
$scope.onSubmit = function() {
newPayment($scope.newItemAmount, $scope.newItemCause); // Assuming they are properties in the controller
showPayMessage();
$scope.payments = payment.getPayments(); // getting the updated array
}

AngularJS: pass perameter to $location.path

I suspect what I'm trying to do is very simple, I'm new to Angular so some obvious practices sort of go over my head. I'm having trouble accessing the show view (sorry, I'm coming to angular from Rails, so I still think in those terms a little bit) for my Acts resource. The view renders fine, but it isn't displaying the data I would like. I suspect the template isn't receiving the $scope.act variable I'm defining in the controller. When I use console.log in the controller, I can see that the variable contains all the data I want to use. I assume I have to do something to pass the variable as a parameter to the template, but I'm not sure how I'd do that.
Here's my code:
app.js
$(document).on('page:load', function() {
return $('[ng-app]').each(function() {
var module;
module = $(this).attr('ng-app');
return angular.bootstrap(this, [module]);
});
});
var snowball_effect = angular.module('snowball_effect', [
'templates',
'ngRoute',
'ngResource',
'controllers'
]);
snowball_effect.config([
'$routeProvider', function($routeProvider) {
return $routeProvider
.when('/', {
templateUrl: "static_pages/templates/index.html",
controller: 'StaticPagesController'
})
.when('/acts/index', {
templateUrl: "acts/templates/index.html",
controller: 'ActsController'
})
.when('/acts/:id', {
templateUrl: "acts/templates/show.html",
controller: 'ActsController'
});
}
]);
var controllers = angular.module('controllers', []);
ActsController.js
controllers = angular.module('controllers');
controllers.controller('ActsController', [
'$scope',
'$routeParams',
'$location',
'$resource',
function($scope,$routeParams,$location,$resource) {
var Act = $resource('/acts/:actId', {
actId: "#id",
format: 'json'
}, {
'create': {
method: 'POST'
}
});
$scope.acts = Act.query();
$scope.addAct = function() {
act = Act.save($scope.newAct, function() {
$scope.acts.push(act);
$scope.newAct = '';
});
}
$scope.deleteAct = function(act) {
Act.delete(act);
$scope.acts.splice($scope.acts.indexOf(act), 1);
}
$scope.linkToShowAct = function(act) {
$scope.act = act;
console.log($scope.act);
$location.path('acts/' + act.id);
}
}]);
show.html
<div class="acts-show">
<div class="container" ng-controller="ActsController">
<div class="body">
<h1>
{{act.name}}
</h1>
<p class="act-show-description">
{{act.description}}
</p>
<p class="act-show-inspires">
<strong>Inspires:</strong>
{{act.inspires}}
</p>
Edit
Back
</div>
</div>
</div>
index.html
<div class="actions_body">
<div class="container">
<h2>Listing Actions</h2>
<div ng-controller="ActsController" class="body">
<table class="row">
<thead>
<tr>
<th class="col-md-2 col-md-offset-1 active">
<label>Name</label>
</th>
<th class="col-md-4">Description</th>
<th class="col-md-2">Inspires</th>
<th colspan="2" class="col-md-2">Modify</th>
</tr>
</thead>
<tbody ng-repeat="act in acts">
<td class="col-md-offset-1 col-md-2">{{act.name}}</td>
<td class="col-md-4">{{act.description}}</td>
<td class="col-md-2">{{act.inspires}}</td>
<td>Edit</td>
<td><button ng-click="deleteAct(act)">Delete</a></button>
</tbody>
</table>
<br>
<button ng-click="newActShow=true">New Action</button>
<button ng-click="newActShow=false">Hide</button>
<div ng-show="newActShow" id="newAct">
<div class="row">
<form class="form-inline" ng-submit="addAct()">
<div class="col-md-3 form-group">
<label for="newActname">Name</label>
<input type="text" ng-model="newAct.name" id="newActname" placeholder="Name" class="form-control col-md-2">
</div>
<div class="col-md-3 form-group">
<label for="newActdescription">Description</label>
<input type="textarea" ng-model="newAct.description" id="newActdescription" placeholder="Description" class="form-control col-md-2">
</div>
<div class="col-md-3 form-group">
<label for="newActinspires">Inspires</label>
<input type="number" ng-model="newAct.inspires" id="newActinspires" placeholder="Inspires" class="form-control col-md-2">
</div>
<div class="col-md-3 form-group">
<input type="submit" value="+" class="btn btn-success">
</div>
</form>
</div>
</div>
</div>
</div>
</div>

try $locationChangeStart in order to make sure your value is set to the scope variable before the state actually changes and the route happens, even if you put the $location.path('acts/' + act.id); before setting the variable, there is no guarantee that the value will be set before the state change (the actual routing).
I would prefer (a more safe value setting method) using a promise for example ..

print function is calling before partial view

What I am trying to do is to open partial view in new window and call print function, but problem is that partial view renders after print function so I always get a blank page. I tried with $timeout function but I get the same result. For now, I have this but this is a hacky solution and I don't like it:
$scope.print = function() {
setTimeout(function() {
print()
}, 1000);
}
This is html of page that i try to open:
<div id="printWrapper" style="background-color:white;" ng-controller="accountContentController" ng-init="print()">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<!-- HEADER -->
<tr>
<td>
<img id="imgLogo" src="#Model.TicketPayOut.Logo" />
</td>
</tr>
<!--HEADER-->
<tr>
<td>
<label id="lblTerminalId" class="left-position padding-top-3 padding-left-3 text-style">#Translator.Translate("TERMINAL")</label>
<span class="left-position padding-top-3 text-style">:</span>
<label id="lblTerminalIdValue" class="left-position padding-top-3 padding-left-3 text-style"></label>
<div style="clear:both"></div>
<label id="lblTerminalName" class="left-position padding-left-3 text-style">#Translator.Translate("BET_OFFICE")</label>
<span class="left-post text-style">:</span>
<label id="lblTerminalNameValue" class="left-position padding-left-3 text-style"></label>
<label id="lblTerminalCityAddress" class="left-position padding-left-3 text-style" style="clear:both;"></label>
<label id="lblCompanyInfo" class="center-position text-style" style="clear:both;"></label>
<label id="lblCompanyAddress" class="center-position text-style" style="clear:both;"></label>
<label id="lblCompanyId" class="center-position text-style" style="clear:both;"></label>
</td>
</tr>
<tr>
<td class="border-top border-bottom">
<div style="padding:10px 0;">
<label id="lblStornoMessage" class="center-position text-style">#Translator.Translate("PAYOUT_CONFIRMATION")</label>
</div>
</td>
</tr>
<tr>
<td class="border-bottom">
<div style="height:25px;padding:10px 3px 0 3px;">
<label id="lblPayoutTicket" class="left-position text-style">#Translator.Translate("PAYOUT_TICKET")</label>
<label id="lblPinValue" class="right-position text-style">{{payoutTime | date: dateFormat }}</label>
</div>
</td>
</tr>
<tr>
<td>
<div style="padding:5px 3px;">
<label id="lblPinTicket" class="left-position text-style">#Translator.Translate("PIN")</label>
<label id="lblPinReturnValue" class="right-position text-style">{{ticketPin}}</label>
</div>
</td>
</tr>
<tr>
<td>
<div style="padding:5px 3px;">
<label id="lblPayinReturn" class="left-position text-style">#Translator.Translate("PAYOUT_AMOUNT")</label>
<label id="lblPayinReturnValue" class="right-position text-style">{{payoutAmount}}</label>
</div>
</td>
</tr>
<tr>
<td class="border-bottom">
<div style="padding:25px 3px 5px 3px;">
<label id="lblCreatedBy" class="left-post text-style">#Translator.Translate("CREATED_BY")</label>
<label id="lblCreatedByValue" class="right-position text-style">#User.Identity.Name</label>
</div>
</td>
</tr>
</table>
</div>
This is button on page where i have print option :
<div class="mr-10">
<div class="pull-right padding-8 mt5 col-lg-2 col-md-2">
<input type="submit" value="#Translator.Translate("CANCEL")" class="btn btn-block secondary-button save-changes padding-8" ng-click="CancelPayOutTicket(ticketPin)" />
</div>
<div class="pull-right padding-8 mt5 col-lg-2 col-md-2">
<input type="submit" value="#Translator.Translate("PAYOUT")" class="btn btn-block save-changes padding-8" ng-class="{'secondary-button':TicketsPayout.BettingSlipResult.TicketHolder.PayoutEnabled==true,'disabled_button':TicketsPayout.BettingSlipResult.TicketHolder.PayoutEnabled==false}" ng-disabled="TicketsPayout.BettingSlipResult.TicketHolder.PayoutEnabled==false" ng-click="FinishTicketPayout(ticketPin);ConfirmTicketPayOut(ticketPin,'#username')"/>
</div>
</div>
Is there any way to avoid setTimeout function and just call print function in new window and populate partial view with data?
EDIT: angular controller:
$scope.CheckTicket = function (ticketPin) {
if (ticketPin != null && ticketPin != "" && ticketPin != undefined) {
var promise = accountDataProviderService.checkTicketPayout(ticketPin);
$scope.checkPromise = promise;
promise.then(
function (response) {
$scope.showTicketPayout = true;
$scope.TicketsPayout = response;
},
function (err) {
$scope.showTicketPayout = false;
$scope.ticketNotFound = true;
$timeout(function ()
{
$scope.ticketNotFound = false;
}, ticketNotFound * 1000);
});
}
}
$scope.CloseMessage = function ()
{
$scope.ticketNotFound = false;
}
$scope.FinishTicketPayout = function (ticketPin)
{
accountDataProviderService.finishTicketPayOut(ticketPin)
.then(function (response) {
$scope.finishTicketPayOut = response;
localStorage.setItem("payoutTime", $scope.finishTicketPayOut.PayoutTime);
localStorage.setItem("payoutAmount", $scope.finishTicketPayOut.PayoutAmount);
});
}
$scope.ConfirmTicketPayOut = function (ticketPin, username) {
$scope.ticketPin = ticketPin;
localStorage.setItem("pin", ticketPin);
accountDataProviderService.confirmTicketPayOut(ticketPin, username)
.then(function (response) {
$scope.confirmTicketPayOut = response;
if ($scope.confirmTicketPayOut.Result == true) {
var newWindow = window.open("/print")
}
});
localStorage.clear();
}

make the data "package" a promise inside your controller:
angular.module("printModule").controller('printController', ['$scope', '$window', '$q', function ($scope, $window, $q) {
$scope.ticketPin = localStorage.getItem("pin");
$scope.payoutTime = localStorage.getItem("payoutTime");
$scope.payoutAmount = localStorage.getItem("payoutAmount");
var defer = $q.defer();
defer.resolve($scope.ticketPin);
defer.resolve($scope.payoutTime);
defer.resolve($scope.payoutAmount);
defer.promise.then(function () {
$window.print();
})
}]);
have a nice day ;)

how to pass data from modal to function

I have a modal form that has several inputs text form control. How do I pass the data to post to the database so that ng-grid gets updated?
do I call my ajax create function within the $scope.open controller section? or resolve?
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
}]);
the create function
$scope.createMedicalServices = function(){
var providerMedicalServiceAttributes = {};
providerMedicalServiceAttributes.cash_price = $scope.cash_price
providerMedicalServiceAttributes.average_price = $scope.average_price
providerMedicalServiceAttributes.service = $scope.service
var medicalServicesAttributes = {};
medicalServicesAttributes.description = $scope.description
medicalServicesAttributes.service = $scope.service
var newMedicalService = ProviderMedicalService.create(providerMedicalServiceAttributes);
$scope.provider_medical_services.push(newMedicalService);
ProviderMedicalService.update(providerMedicalServiceAttributes, '/providers/services');
};
create function from factory (factory does delete, querying and create)
ProviderMedicalService.prototype.create = function(attr){
return this.service.save(attr);
}
the html for the modal form
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="header-modal">
<h3>Add Service</h3>
</div>
<div class="modal-body">
<form name="myForm" novalidate ng-submit="submit()">
<div class="row well-text-padding">
<div class="col-md-3 modal-form-tag">CPT Code</div>
<div class="col-md-6">
<input type="text" class="form-control form-control-modal" ng-model="CPT_code" placeholder="CPT Code">
</div>
</div>
<label class="checkbox modal-check-box">
<input type="checkbox" ng-model="No_CPT_code">Service does not have a associated CPT Code
</label>
<div class="row well-text-padding">
<div class="col-md-3 modal-form-tag">Description</div>
<div class="col-md-6">
<textarea class="form-control form-control-modal" rows="3" ng-model="Description" placeholder="Add a Description"></textarea>
</div>
</div>
<div class="row well-text-padding">
<div class="col-md-3 modal-form-tag">Average Cost</div>
<div class="col-md-6">
<input type="text" class="form-control form-control-modal" ng-model="Average_cost" placeholder="$">
</div>
</div>
<div class="row well-text-padding">
<div class="col-md-3 modal-form-tag">Offered Price</div>
<div class="col-md-6">
<input type="text" class="form-control form-control-modal" ng-model="Offered_price" placeholder="$">
</div>
</div>
<div class="btn-row2 modal-button-row">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" type="submit">Add Service</button>
</div>
</script>

You can make the POST request to server when clicked Add Service, or you can pass your data from modal to your main controller through $scope.$close().
Example as below:
In modal controller
var data = {
CPT_code: $scope.CPT_code,
No_CPT_code: $scope.No_CPT_code,
Description: $scope.Description,
Average_cost: $scope.Average_cost,
Offered_price: $scope.Offered_price
};
$scope.$close(data); // pass the data through modal close event
Then in your main controller by using the promise to get the data
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
}).result.then(function (response) {
var data = response; // here is your data from your modal
});
};
Hope this helps.