I need to set the ng-model via controller by selecting one of the listed images in Dialog and insert the ng-model of the form to record it in json-server.
My resource is provide by json-server.
Is there any way to do this? Or there's no way .. or some other way?
Template:
<form class="form-horizontal" role="form" ng-submit="addItem($stateParams.section)" enctype="multipart/form-data">
<div layout="row" layout-wrap>
<div flex="75">
<md-card>
<md-card-content>
<h2>Adicionar novo Post</h2>
<md-input-container>
<label>Digite o título aqui</label>
<input ng-model="item.title">
</md-input-container>
<md-input-container>
<label>Introdução</label>
<input ng-model="item.subtitle">
</md-input-container>
<md-input-container>
<label>Link permanente</label>
<input ng-model="item.slug">
</md-input-container>
<text-angular ng-model="item.content"></text-angular>
<md-input-container>
<label>Resumo</label>
<input ng-model="item.excerpt">
</md-input-container>
</md-card-content>
</md-card>
</div>
<div flex="25">
<md-card>
<md-card-content>
<h2>Configurações do Post</h2>
<md-input-container ng-controller="PublishedControl">
<md-select name="situation" ng-model="item.situation" placeholder="Status do Post">
<md-option ng-repeat="pub in publisheds" ng-value="{{pub.id}}">{{pub.name}}</md-option>
</md-select>
</md-input-container>
<div layout layout-sm="column">
<md-input-container flex>
<label>Date</label>
<input type="date" ng-model="item.posted">
</md-input-container>
<md-input-container flex>
<label>Time</label>
<input type="time" ng-model="item.posted">
</md-input-container>
</div>
<md-card-footer layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<md-button class="md-raised md-primary" type="submit">Salvar</md-button>
<md-button class="md-raised" ui-sref="listItems({section: $stateParams.section})">Cancelar</md-button>
</md-card-footer>
</md-card-content>
</md-card>
<md-card ng-if="categorias[0].cats">
<md-card-content>
<h2>Categorias</h2>
<div layout-padding>
<!-- <checkbox ng-repeat="cat in categorias[0].cats" value="{{cat.id}}" ng-checked="{{item.cats.indexOf(cat.id) > -1}}" ng-model="item.cats">{{cat.name}}</md-checkbox> -->
<label ng-repeat="cat in categorias[0].cats" style="display:block;" layout="row" flex="100">
<input type="checkbox" checklist-model="item.cats" checklist-value="cat.id"> {{cat.name}}
</label>
</div>
</md-card-content>
</md-card>
<md-card>
<md-card-content ng-controller="MediaController">
<h2>Imagem em Destaque</h2>
<div class="input-group form-group">
<figure ng-if="item.image"><img ng-model="item.image" ng-src="item.image" alt=""></figure>
<md-button class="md-raised" type="button" ng-click="chooseMedia($event)">Escolha uma Imagem</md-button>
</div>
</md-card-content>
</md-card>
</div>
</div>
</form>
Controller:
module.controller('MediaController', ['$scope', '$mdDialog', 'Media', function($scope, $mdDialog, Media) {
$scope.chooseMedia = function(ev){
$mdDialog.show({
parent : angular.element(document.body),
controller : chooseMediaControl,
ariaLabel : 'Choose Media',
targetEvent : ev,
clickOutsideToClose : true,
templateUrl : 'partials/tpl/media.html'
})
function chooseMediaControl($scope, $mdDialog, Media) {
$scope.media = Media.query();
$scope.cancelMedia = function() {
$mdDialog.cancel();
};
$scope.applyMedia = function() {
$scope.item.image = $scope.image;
$mDialog.hide();
};
$scope.inserMedia = function(imageurl){
$scope.image = imageurl;
};
}
}
}])
Service:
.factory('Media',function($resource){
return $resource('http://localhost:5000/media/:id',{id:'#id'},{
update: {
method: 'PUT'
}
});
})
Related
I'm new to angular material:
I want to show dialog for editing records in a table:
I referenced angular material and angular aria, used ngMaterial dependency and $mdDialog service.
I have a div containing all editing fields, the div visibility is set to hidden:
<div style="visibility: hidden">
<div class="md-dialog-container" id="taskEdit">
<md-dialog style="width:100%; height:100%" layout-padding>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Edit Task</h2>
<span flex></span>
</div>
</md-toolbar>
<ng-form name="TaskForm">
<div layout-gt-sm="row">
<md-input-container>
<label>Task Title</label>
<input name="TaskTitle" ng-model="task.title" required>
<div ng-messages="TaskForm.TaskTitle.$error">
<div ng-message="required">This is required</div>
</div>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Description</label>
<textarea ng-model="task.description" md-maxlength="150" md-select-on-focus></textarea>
</md-input-container>
<md-input-container class="md-block">
<label>Due Date</label>
<md-datepicker style="margin-top: 2px;" ng-model="task.dueDate"></md-datepicker>
</md-input-container>
<md-input-container>
<label>Task Status</label>
<input name="TaskStatus" ng-model="task.status">
</md-input-container>
</div>
</ng-form>
<input class="btn btn-primary" style="width:15%" type="submit" ng-disabled="!TaskForm.$valid" ng-click="EditTask()" value="Submit" aria-label="submit" />
</md-dialog>
</div>
</div>
here's the showDialog function::
$scope.showDialog = function () {
$mdDialog.show({
controller: DialogController,
contentElement: '#taskEdit',
parent: angular.element(document.body),
clickOutsideToClose: true
});
};
function DialogController($scope, $mdDialog) {
$scope.hide = function () {
$mdDialog.hide();
};
$scope.cancel = function () {
$mdDialog.cancel();
};
}
but when I click the button, the dialog is not appearing properly, it lacks the animation and is rendered in the same layer as the parent page:
You need to refer the angular material css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">
I am trying to integrate payumoney with angularjs. But it shows error like 'checksum failed'.
controller.js
(function ()
{
'use strict';
angular
.module('app.todo')
.controller('TodoController', TodoController);
/** #ngInject */
function TodoController($document, $mdDialog, $mdSidenav, Tasks, Tags,$scope,$crypthmac)
{
var vm = this;
vm.txnid = "fd3e847h2";
vm.firstname = "Hemanth";
vm.email = "kevinguru888#gmail.com";
vm.phone = "9901996148";
vm.service_provider = "payu_paisa";
vm.productinfo = "steering";
vm.amount = "399.00";
vm.surl = "http://localhost:3000/success";
vm.furl = "http://localhost:3000/failure";
vm.key = "OygoFs";
vm.salt = "BV1QBwCv";
var string = vm.key + '|' + vm.txnid + '|' + vm.amount + '|' + vm.productinfo + '|' + vm.firstname + '|' + vm.email + '|||||||||||' + vm.salt;
vm.hash = $crypthmac.encrypt(string,"");
}
})();
html file
<head>
<script type='text/javascript' src="../bower_components/angular-hmac- sha512/angular-hmac-sha512.js"></script>
</head>
<div id="todo" class="page-layout simple tabbed">
<!-- HEADER -->
<div class="header md-accent-bg" layout="row" layout-align="start center">
<div class="title">
<span class="md-display-1 font-weight-300">PAY U Form</span>
</div>
</div>
<!-- / HEADER -->
<md-content layout-padding>
<div class="innerContent">
<form action='https://test.payu.in/_payment', method='post', name="buyDetailsForm">
<md-content class="md-padding">
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Transaction Id</label>
<input name="txnid" ng-model="vm.txnid">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Name</label>
<input name='firstname' ng-model="vm.firstname">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Email</label>
<input name='email' ng-model="vm.email">
</md-input-container>
</div>
</div>
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Mobile</label>
<input name='phone' ng-model="vm.phone">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Service Provider</label>
<input name='service_provider' ng-model="vm.service_provider">
</md-input-container>
</div>
</div>
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Product Info</label>
<input name='productinfo' ng-model="vm.productinfo">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Amount</label>
<input name='amount' ng-model="vm.amount">
</md-input-container>
</div>
</div>
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Success Url</label>
<input name='surl' ng-model="vm.surl">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Failure Url</label>
<input name='furl' ng-model="vm.furl">
</md-input-container>
</div>
</div>
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Key</label>
<input name='key' ng-model="vm.key">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Hash</label>
<input name='hash' ng-model="vm.hash">
</md-input-container>
</div>
</div>
</md-content>
<div layout="row" layout-align="end center">
<md-button class="md-raised md-primary" ng-click="vm.cancel()">Cancel</md-button>
<md-button class="md-raised md-primary" ng-click="vm.submit(buyDetailsForm)">Place Order</md-button>
</div>
</form>
</div>
</md-content>
</div>
The error shows like "SORRY! We were unable to process your payment Checksum Failed".
This error occurrs when hash and passing value in form doesn't match.
If you are passing 2 udf then you must also send it in form with name.
And if you are passing the same but still got the same error, then it is because of the problem in generation in hash. You are using $crypthmac but it doesn't create perfect hash, to create either use or own sha512 algorithm, or use an API, to create the perfect hash. You can check that hash created by $crypthmac is not that perfect that PayUMoney decrypt it perfectly, that's why it returns error. Just check has generated with $crypthmac and <?php echo hash('sha512', 'text') ?> you can get the difference.
I am new in angularjs and making a dynamic form fields with ng-repeat and all my fields having the same ng-model
My Code:
<form name="dataset" class="md-inline-form" novalidate>
<div ng-repeat="column in columns">
<input type="hidden" name="column_name" ng-model="dataset.columnName" value="{{column}}">
<label for="">Column: <strong>{{column}}</strong></label>
<div layout="column" layout-gt-xs="row">
<md-input-container flex>
<label>Select Type</label>
<md-select name="type" ng-model="dataset.type" required>
<md-option value="string">String</md-option>
<md-option value="numeric">Numeric</md-option>
</md-select>
<div class="errors" ng-messages="dataset.state.$error">
<div ng-message="required">Required</div>
</div>
</md-input-container>
</div>
</div>
<md-button type="submit" ng-click="SavevalidateColumns()" class="md-raised md-accent" aria-label="Submit">Validate Now</md-button>
</form>
Now i just want to get the values of my all dynamically created fields in my controller. Can any one help me regarding this ?
You have to use my code.
<form name="dataset" class="md-inline-form" novalidate>
<div ng-repeat="column in columns">
<input type="hidden" name="column_name" ng-model="dataset.columnName" value="{{column}}">
<label for="">Column: <strong>{{column}}</strong></label>
<div layout="column" layout-gt-xs="row">
<md-input-container flex>
<label>Select Type</label>
<md-select name="type" ng-model="dataset.type" required>
<md-option value="string">String</md-option>
<md-option value="numeric">Numeric</md-option>
</md-select>
<div class="errors" ng-messages="dataset.state.$error">
<div ng-message="required">Required</div>
</div>
</md-input-container>
</div>
</div>
<md-button type="submit" ng-click="SavevalidateColumns(dataset)" class="md-raised md-accent" aria-label="Submit">Validate Now</md-button>
</form>
First You have to pass data in funciton.
Your controller code:
(function () {
'use strict';
angular.module('moduleName', [])
.controller('myCtrl',
function ($scope) {
$scope.SavevalidateColumns = function (dataset) {
var colName = dataset.columnName;
var type = dataset.type;
console.log(colName + "::::" + type);
};
});
})();
You have to inject this module into app also.
I have written a angular directive to read the file input data. However the updated scope variable is not accessible when I click on update button. why I am unable to access the file variable that is updated in ngFileSelect directive?
JS
// Define the `changeWord` module
angular.module('changeWord', []);
/// <reference path="changeWord.component.js" />
angular.
module('changeWord').
component('changeWord', {
templateUrl: 'change-word/change-word.template.html',
controller: function ChangeWordController($scope, dictionaryService) {
var self = this;
//$rootScope.loggedIn = $cookies.get('loggedIn');
self.formShowing = false;
$scope.search = function () {
dictionaryService.getWordsStartWith(self.searchText, function (r) {
self.searchResults = r;
});
};
$scope.change = function (id) {
dictionaryService.getWord(id, result => {
self.key = id;
self.word = result.word;
self.wordInEnglish = result.wordInEnglish;
self.pronunciation = result.pronunciation;
var syns ='';
angular.forEach(result.synonyms, a =>{
syns += (syns == '') ? a.wordInEnglish : ', ' + a.wordInEnglish;
})
self.synonyms = syns;
syns = '';
angular.forEach(result.antonyms, a => {
syns += (syns == '') ? a.wordInEnglish : ', ' + a.wordInEnglish;
})
self.antonyms = syns;
});
}
$scope.clear = function () {
angular.element(document.querySelector('#pFile')).val(null);
self.word = '';
self.wordInEnglish = '';
self.pronunciation = '';
self.synonyms = '';
self.antonyms = '';
};
$scope.update = function () {
dictionaryService.deleteWord(self.key);
// unable to access the scope here
dictionaryService.addNewWord(self.word, self.wordInEnglish, self.pronunciation, $scope.file, self.synonyms, self.antonyms);
this.clear();
self.formShowing = false;
}
}
}).directive("ngFileSelect", function () {
return {
link: function ($scope, el) {
el.bind("change", function (e) {
$scope.file = (e.srcElement || e.target).files[0];
//$scope.update();
})
}
}
});
HTML
<div ng-cloak>
<form name="changeForm" button-form ng-submit="update()" ng-if="$ctrl.formShowing">
<md-card flex flex-gt-md="70">
<md-card-header>
<md-card-avatar>
<md-icon class="md-avatar-icon">edit</md-icon>
</md-card-avatar>
<md-card-header-text>
<span class="md-title">Change Existing Word</span>
<span class="md-subhead">in kannada dictionary</span>
</md-card-header-text>
</md-card-header>
<md-card-content>
<md-input-container class="md-block">
<input name="word" ng-model="$ctrl.word" placeholder="Word in Kannada" required />
<div ng-messages="changeForm.word.$error" ng-show="changeForm.word.$dirty" role="alert">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<input name="wordInEnglish" ng-model="$ctrl.wordInEnglish" placeholder="Word in English" disabled />
<div ng-messages="changeForm.wordInEnglish.$error" ng-show="changeForm.wordInEnglish.$dirty" role="alert">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<p flex layout="row">
<md-input-container class="md-block" flex="50">
<input ng-model="$ctrl.pronunciation" placeholder="Pronunciation" />
</md-input-container>
<md-input-container class="md-block" flex="50">
<input id="pFile" type="file" ng-File-Select accept="audio/*" capture aria-label="Pronunciation Audio">
</md-input-container>
</p>
<md-input-container class="md-block">
<textarea ng-model="$ctrl.synonyms" placeholder="Synonyms"></textarea>
</md-input-container>
<md-input-container class="md-block">
<textarea ng-model="$ctrl.antonyms" placeholder="Antonyms"></textarea>
</md-input-container>
</md-card-content>
<md-card-actions>
<md-button class="md-raised md-primary" type="submit">Save</md-button>
<md-button class="md-accent" ng-click="$ctrl.formShowing = !$ctrl.formShowing">Cancel</md-button>
</md-card-actions>
</md-card>
</form>
<md-content class="md-padding">
<form name="searchForm" button-form ng-submit="search()">
<md-input-container md-no-float class="md-block">
<input name="searchText" ng-model="$ctrl.searchText" type="text" placeholder="Search">
<md-icon style="display:inline-block;" type="submit">search</md-icon>
<div class="hint" ng-show="searchForm.searchText.$dirty">Press Enter to search</div>
</md-input-container>
</form>
<md-list flex>
<md-list-item class="md-2-line" ng-repeat="result in $ctrl.searchResults" ng-click="null">
<div class="md-list-item-text" layout="column">
<h3>{{ result.wordInEnglish }}</h3>
<p>{{ result.word }}</p>
<md-button name="ch" class="md-raised md-primary md-secondary" ng-click="$ctrl.formShowing=!$ctrl.formShowing; change(result.$id);">Change</md-button>
</div>
</md-list-item>
</md-list>
</md-content>
</div>
Perfect, $scope is not existing in component. Need to use keyword this
I have profile page in angular js, after I filled and sent them to DB. Then once again if I come back to the same profile page I didn't get any values in the field.
profile.html
<form name="profileForm">
<br/>
<div flex style="max-width:700px;">
<md-input-container class="md-block">
<label>Name</label>
<input ng-model="vm.name"></input>
</md-input-container>
</div>
<div flex style="max-width:700px;">
<md-input-container class="md-block">
<label>Mobile Number</label>
<input ng-model="vm.mobile"></input>
</md-input-container>
</div>
<div flex style="max-width:700px;">
<md-input-container class="md-block">
<label>Email</label>
<input ng-model="vm.email"></input>
</md-input-container>
</div>
<div flex style="max-width:700px;">
<label>DOB:</label>
<md-datepicker ng-model="vm.profileForm.dob" md-placeholder="Enter date">
</md-datepicker>
</div>
<div flex style="max-width:700px;">
<md-input-container class="md-block" >
<label>Country</label>
<md-select ng-model="vm.profileForm.Country" ng-change="vm.getCountryStates()">
<md-option ng-repeat="countryName in vm.countries" value="{{countryName.id}}" >
{{countryName.country}}
</md-option>
</md-select>
</md-input-container>
</div>
<div flex style="max-width:700px;">
<md-input-container class="md-block" >
<label>State</label>
<md-select ng-model="vm.profileForm.State" ng-change = "vm.getStateCities()">
<md-option ng-repeat="stateName in vm.states" value="{{stateName.Id}}">
{{stateName.state}}
</md-option>
</md-select>
</md-input-container>
</div>
<div flex style="max-width:700px;">
<md-input-container class="md-block" >
<label>City</label>
<md-select ng-model="vm.profileForm.City">
<md-option ng-repeat="cityName in vm.cities" value="{{cityName.Id}}">
{{cityName.city}}
</md-option>
</md-select>
</md-input-container>
</div>
<div flex style="max-width:700px;">
<md-input-container class="md-block" >
<label>Postal Code</label>
<input name="postalCode" ng-model="vm.profileForm.postalCode" ng-pattern="/^[0-9]{6}$/" md-maxlength="6">
</md-input-container>
</div>
<span style="color:green; font-size:20px;">{{vm.message}}</span>
<div layout="row" layout-align="space-between center">
<div>
<img src="assets/icons/fonts/backArrow.png" alt="image caption" style="width:18px; height:18px">
<a ng-href ng-click="vm.nextTab()" >Back</a>
</div>
<div style="margin-right:300px">
<a ng-href="http://localhost:3000/pages/dashboard">Skip</a>
<md-button class="md-raised md-primary" ng-click="vm.profileInfo(vm.profileForm);">Save & Continue</md-button>
</div>
</div>
</form>
In the picture first 3 values getting through ngStorage, after filled remaining fields data stored in DB. For chekcBox I have used cascading dropdown.
profile.js
(function ()
{
'use strict';
angular
.module('app.invite-friends')
.controller('InviteFriendsController', InviteFriendsController);
/** #ngInject */
function InviteFriendsController(Friendslist, $localStorage, $scope, $http, $location, CustomerService)
{
var vm = this;
vm.countries = CustomerService.getCountry();
vm.getCountryStates = function(){
vm.states = CustomerService.getCountryState(vm.profileForm.Country);
vm.cities =[];
}
vm.getStateCities = function(){
vm.cities = CustomerService.getStateCity(vm.profileForm.State);
}
vm.uid = $localStorage._id;
vm.profileInfo = function(userData){
$http({
url:'http://192.168.2.8:7200/api/profile_save',
method:'POST',
data: {info:userData, loginId:vm.uid}
}).then(function(res){
if(res.data.success){
vm.message = 'Your profile information has been saved successfully.';
$location.path('/pages/dashboard')
}
}, function(error){
alert(error.data);
});
};
$http({
url:'http://192.168.2.8:7200/api/checkIfExists',
method:'POST',
data: {userId: vm.uid}
}).success(function(res){
vm.name = res.result[0].name;
vm.mobile = res.result[0].mobile;
vm.email = res.result[0].email;
vm.DOB = res.result[0].DOB;
vm.Country = res.result[0].Country;
vm.State = res.result[0].State;
vm.City = res.result[0].City;
vm.postalCode = res.result[0].PostCode;
}, function(error){
alert(error.data);
});
}
})();
All you ng-model is getting or updating data to vm.profileForm in the view where as while you setting data to view form controller you are adding properties to vm, not to vm.profileForm
Change the following code in $http success
from
vm.DOB = res.result[0].DOB;
vm.Country = res.result[0].Country;
vm.State = res.result[0].State;
vm.City = res.result[0].City;
vm.postalCode = res.result[0].PostCode;
to
vm.profileForm.dob = res.result[0].DOB;
vm.profileForm.Country = res.result[0].Country;
vm.profileForm.State = res.result[0].State;
vm.profileForm.City = res.result[0].City;
vm.profileForm.postalCode = res.result[0].PostCode;