I have a profile with a series of cards. Each card has a type (e.g. gallery card, quote card, etc) and the profile can have 1 or more of each type. I'm building a profile editor and want to be able to open an edit form in a modal. Each card has its own type of form with unique inputs, but there is only one form per card type, since we can't know in advance how many cards of each type a profile will have.
For each form, I have a number of ng-init directives to prepopulate the edit form with the current model's attributes. This works great except that if I have more than one card of a type, each card's edit form will have the data from the last card in the set. Is there a way I can trigger the ng-init directives to run again when I open the form (e.g. with an ng-click) so that the user will always see the current model's attributes?
Here is what one of my card forms looks like:
<% if c.class.name == 'QuoteCard' %>
<div class="row-scrollable" ng-show="view === 'quote-card'">
<div class="col-lg-12">
<form accept-charset="UTF-8" name="editQuoteCardForm" ng-submit="update({card: editQuoteCard, type: 'quote_card'})" novalidate>
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" ng-model="editQuoteCard.token" ng-init="editQuoteCard.token='<%= form_authenticity_token %>'">
<input name="id" type="hidden" ng-model="editQuoteCard.id" ng-init="editQuoteCard.id='<%= c.id %>'">
<div class="form-group">
<label>Title</label>
<br style="clear:both;" />
<input type="text" class="form-control" name="title" ng-init='editQuoteCard.title = "<%= c.title %>"' ng-model="editQuoteCard.title" required>
</div>
<div class="form-group">
<label>Attribution</label>
<br style="clear:both;" />
<input type="text" class="form-control" name="attribution" ng-init='editQuoteCard.title = "<%= c.attribution %>"' ng-model="editQuoteCard.attribution">
</div>
<div class="form-group">
<label>Quote</label>
<br style="clear:both;" />
<textarea rows="3" class="form-control" name="quote" ng-init='editQuoteCard.title = "<%= c.quote %>"' ng-model="editQuoteCard.quote" required></textarea>
</div>
<div class="form-group">
<label>Media</label>
<br style="clear:both;" />
<input type="hidden" class="form-control" name="photo" ng-model="editQuoteCard.image">
<input type="hidden" class="form-control" name="video" ng-model="editQuoteCard.video">
<%= photo = Photo.find_by(quote_card_id: c.id) %>
<%= video = Video.find_by(quote_card_id: c.id) %>
<div class="profile-builder attachment"
ng-init='<%= "editQuoteCard.image = #{{ image_url: photo.image.url, id: photo.id }.to_json}" unless photo.nil? %>'
ng-init='<%= "editQuoteCard.video = #{{ media_url: video.media_url, media_type: video.media_type, id: video.id }.to_json}" unless video.nil? %>'>
<div ng-show="editQuoteCard.video" class="content video-content result iframe">
<div class="caption delete-btn" ng-click="editQuoteCard.video = undefined;">
<i class="fa fa-times"></i>
</div>
<iframe ng-if="editQuoteCard.video.media_type === 'Youtube'" ng-src="{{editQuoteCard.video.media_url + '?showinfo=0&autohide=1' | trustAsResourceUrl}}" frameborder="0" id="ytplayer" type="text/html"></iframe>
<iframe ng-if="editQuoteCard.video.media_type === 'Vimeo'" ng-src="{{editQuoteCard.video.media_url + '?badge=0&byline=0&title=0' | trustAsResourceUrl}}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div ng-show="editQuoteCard.image" class="content result">
<div class="delete-btn" ng-click="editQuoteCard.image = undefined;">
<i class="fa fa-times"></i>
</div>
<div class="image-container" ng-style="{'background-image': 'url(' + editQuoteCard.image.image_url + ')'}"></div>
</div>
</div>
</div>
<br style="clear:both;" />
<div class="form-group">
<input class="btn btn-primary" style="float:right;" name="commit" type="submit" value="Update Card" ng-disabled="editQuoteCardForm.$invalid">
<div class="btn btn-default" style="float:right;margin-right:10px;" ng-click="openMediaBrowser({type: '<%= c.class %>', id: <%= c.id %>, index: <%= i %>});" ng-show="!editQuoteCard.image && !editQuoteCard.video">Add Media</div>
</div>
</form>
</div>
</div>
<% end %>
And in my controller, I have an edit function that opens the modal with the correct form:
$scope.edit = function(options) {
modal.open({
content: $('#edit_card_' + options.index + '_form'),
elem: $('#edit_card_' + options.index + '_form_container')
})
};
Related
I am kind of new in AngularJS, and I have a form that users can edit there form. But when user clicks update, it updates the form. BUT, the user does not update the user. Shown in the image
Image here
Here is my code:
<div ng-controller="MyCtrl">
<div class="people-view">
<h2 class="name">{{people.first}}</h2>
<h2 class="name">{{people.last}}</h2>
<span class="title">{{people.title}}</span>
<span class="date">{{people.date}} </span>
</div>
</div>
</div>
<!-- the form -->
<div class="list-view">
<form>
<fieldset ng-disabled="inactive">
<legend>Basic Info</legend>
<b>First Name:</b>
<input type="text" ng-model="myObject.first">
<br>
<b>Last Name:</b>
<input type="text" ng-model="myObject.last">
<button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
Edit
</button>
<button type="submit" class="submit" ng-show="!inactive" ng-click="update()">Update</button>
</form>
App.js
var app = angular.module("Portal", ['ngRoute']);
app.controller('MyCtrl', function($scope) {
$scope.inactive = true;
$scope.people = {};
$scope.myObject = JSON.parse(localStorage.getItem('myObject')) || {
first : $scope.people.first,
last : $scope.people.last,
};
$scope.update = function(){
$scope.people.first = $scope.myObject.first;
$scope.people.last = $scope.myObject.last;
localStorage.setItem('myObject', JSON.stringify($scope.myObject));
};
$scope.deletePeople = deletePeople;
function deletePeople(id){
var userToDelete;
$scope.people.forEach(function(p, index){
if(p.id == id){
userToDelete = index;
}
});
$scope.people.splice(userToDelete, 1);
console.log($scope.people);
}
});
List of users
<div class="people" ng-repeat="p in people | filter:userSearch" >
<a href="#/people/{{ p.id }}">
<img ng-src="{{p.img}}"/>
<span class="name">{{p.first}} </span>
<span class="name">{{p.last}} </span>
<p class="title">{{p.title}} </p>
<span class="date">{{p.date}} </span>
</a>
</div>
The people view section should be included under <div ng-controller="MyCtrl"> div. So just move that line up so it's the first line of the code.
Your ng-model in the form needs to be people.first and people.last respectively. E.g. <b>First Name:</b>
<input type="text" ng-model="people.first">
<br>
<b>Last Name:</b>
<input type="text" ng-model="people.last">
check this
As Swailem95 said you have to move the <div ng-controller="MyCtrl"> top and it looks like below after that.
<div ng-controller="MyCtrl">
<div class="people-view">
<h2 class="name">{{people.first}}</h2>
<h2 class="name">{{people.last}}</h2>
<span class="title">{{people.title}}</span>
<span class="date">{{people.date}} </span>
</div>
<!-- the form -->
<div class="list-view">
<form>
<fieldset ng-disabled="inactive">
<legend>Basic Info</legend>
<b>First Name:</b>
<input type="text" ng-model="myObject.first">
<br>
<b>Last Name:</b>
<input type="text" ng-model="myObject.last">
</fieldset>
<button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
Edit
</button>
<button type="submit" class="submit" ng-show="!inactive" ng-click="update()">Update</button>
</form>
</div>
</div>
I want a form to be created dynamically with three inputs each time a new data item is found. Whenever the end user clicks on a particular checkbox the selected field name, other input values corresponding to the form group have to be submitted to the controller function. I created a JSFiddle for the layout.
<div class="panel panel-primary" ng-controller="citycontroller as ctrl">
<div class="panel-heading">
Available Cities
</div>
<div class="panel-body">
<h4>
{{data}}
</h4>
<div ng-repeat="x in data" class="[ form-group form-inline ]">
<input class="form-control input-md" type="checkbox" id="{{x.name}}" ng-model="name" autocomplete="off" />
<div class="[ btn-group ]">
<label for="{{x.name}}" class="[ btn btn-success ]">
<span class="[ glyphicon glyphicon-ok ]"></span>
<span> </span>
</label> <label for="{{x.name}}" class="[ btn btn-default active ]">
{{x.name}}
</label>
</div>
<input class="form-control input-md" type="text" placeholder="periodicity" id="x.periodicity" autocomplete="off" />
</div>
<button type="button" class="btn btn-info" style="float: right" ng-click="ctrl.addInfo()">Add</button>
</div>
</div>
Controller method is as follows:
var mainApp = angular.module('cityinfo',[]);
mainApp.controller('citycontroller', function($scope,$http,$window,$interval) {
var cities=[{"name":"hyd","periodicity":"5"},{"name":"chn","periodicity":"5"},{"name":"blr","periodicity":"5"}];
$scope.data = cities;
this.addInfo=function() {
console.log('update city information...');
//get list of city names that are selected by the user in the form here and print their values
}
});
Not getting idea about how to retrieve form values in the controller method addInfo(). Can anyone help me in this regard.
You'll need to track which checkboxes are checked using ng-model.
One approach could be as follows.
HTML:
<div ng-repeat="city in cities">
<input type="checkbox" ng-model="city.checked" />
</div>
JS:
$scope.cities = [{
name: 'foo',
periodicity: 5,
checked: false
}, {
name: 'bar'
periodicity: 6,
checked: false
}]
$scope.addInfo = function() {
// Using lodash
_($scope.cities).filter({checked: true}).each(function(city) {
// do stuff
}
}
You don't have to change your code at all. Just by changing the ng-model of your input you can achieve it:
HTML
</div>
<div class="panel-body">
<h4>
{{data}}
</h4>
<div ng-repeat="x in data" class="[ form-group form-inline ]">
<input class="form-control input-md" type="checkbox" id="{{x.name}}" ng-model="x.value" autocomplete="off" />
<div class="[ btn-group ]">
<label for="{{x.name}}" class="[ btn btn-success ]">
<span class="[ glyphicon glyphicon-ok ]"></span>
<span> </span>
</label>
<label for="{{x.name}}" class="[ btn btn-default active ]">
{{x.name}}
</label>
</div>
<input class="form-control input-md" type="text" placeholder="periodicity" id="x.periodicity" autocomplete="off" />
</div>
<button type="button" class="btn btn-info" style="float: right" ng-click="ctrl.addInfo()">Add</button>
</div>
</div>
SCRIPT
var mainApp = angular.module('myApp',[]);
mainApp.controller('citycontroller', function($scope) {
var cities=[{"name":"hyd","periodicity":"5"},{"name":"chn","periodicity":"5"},{"name":"blr","periodicity":"5"}];
$scope.data = cities;
this.addInfo=function() {
console.log($scope.data);
//get list of city names that are selected by the user in the form here and print their values
}
});
In your browser console check for value. It will be true if checkbox is selected.
I have a form editQuoteCardForm within an ng-repeat that is repeated multiple times. The form is tied to the editQuoteCard model. When a user clicks the edit button, the form is prepopulated with the correct data for the current model.
The problem I'm having is that I can't validate the form by calling editQuoteCardForm.$valid because there are multiple instances of editQuoteCardForm in the DOM. In fact, if I call $scope.editQuoteCardForm within a debugger session, it returns undefined.
My question is, how can I properly handle the form name within an ng-repeat in such a way that I can validate the form?
Here is the code for my form:
<div ng-repeat="c in quoteCards" style="display:none;" id="{{'edit_quote_card_' + c.id + '_form_container'}}">
<div class="row" id="{{'edit_quote_card_' + c.id + '_form'}}">
<div class="col-lg-12">
<div class="row-scrollable" ng-show="view === 'quote-card'">
<div class="col-lg-12">
<form accept-charset="UTF-8" name="editQuoteCardForm" ng-submit="update({card: editQuoteCard, type: 'quote_card'})" novalidate>
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" ng-model="editQuoteCard.token">
<input name="id" type="hidden" ng-model="editQuoteCard.id">
<div class="form-group">
<label>Title</label>
<br style="clear:both;" />
<input type="text" class="form-control" name="title" ng-model="editQuoteCard.title" required>
</div>
<div class="form-group">
<label>Attribution</label>
<br style="clear:both;" />
<input type="text" class="form-control" name="attribution" ng-model="editQuoteCard.attribution">
</div>
<div class="form-group">
<label>Quote</label>
<br style="clear:both;" />
<textarea rows="3" class="form-control" name="quote" ng-model="editQuoteCard.quote" required></textarea>
</div>
<div class="form-group">
<label>Media</label>
<br style="clear:both;" />
<input type="hidden" class="form-control" name="photo" ng-model="editQuoteCard.image">
<input type="hidden" class="form-control" name="video" ng-model="editQuoteCard.video">
<div class="profile-builder attachment">
<div ng-show="editQuoteCard.video" class="content video-content result iframe">
<div class="caption delete-btn" ng-click="editQuoteCard.video = undefined;">
<i class="fa fa-times"></i>
</div>
<iframe ng-if="editQuoteCard.video.media_type === 'Youtube'" ng-src="{{editQuoteCard.video.media_url + '?showinfo=0&autohide=1' | trustAsResourceUrl}}" frameborder="0" id="ytplayer" type="text/html"></iframe>
<iframe ng-if="editQuoteCard.video.media_type === 'Vimeo'" ng-src="{{editQuoteCard.video.media_url + '?badge=0&byline=0&title=0' | trustAsResourceUrl}}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div ng-show="editQuoteCard.image" class="content result">
<div class="delete-btn" ng-click="editQuoteCard.image = undefined;">
<i class="fa fa-times"></i>
</div>
<div class="image-container" ng-style="{'background-image': 'url(' + editQuoteCard.image.image_url + ')'}"></div>
</div>
</div>
</div>
<br style="clear:both;" />
<div class="form-group">
<input class="btn btn-primary" style="float:right;" name="commit" type="submit" value="Update Card" ng-disabled="editQuoteCardForm.$invalid">
<div class="btn btn-default" style="float:right;margin-right:10px;" ng-click="openMediaBrowser({type: c.class, id: c.id, index: $index});" ng-show="!editQuoteCard.image && !editQuoteCard.video">Add Media</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
You can create name for each form dynamically.
<form accept-charset="UTF-8" name="editQuoteCardForm{{$index}}" ng-submit="update({card: editQuoteCard, type: 'quote_card'})" novalidate>
</form>
So, your forms will be named,
editQuoteCardForm0, editQuoteCardForm1, editQuoteCardForm2 etc.
Working on my first small AngularJS App I'm facing problems with a form submit. I worked trough the CodeSchool course and figured the most out by myself, but this form submit thingy... well I just don't get where I'm wrong so that's why it would be nice if you could show me the right solution, so I can go on.
Project: A simple Workout List where you can list all the training sessions you had. This is my HTML, Element 3 is the problem:
<header class="wob-masthead container-fluid">
<div class="row">
<div class="col-md-6" ng-init="tab = 1">
<ul class="nav nav-pills">
<li ng-class="{ active:tab === 1 }"><a href ng-click="tab = 1">Overview</a></li>
<li ng-class="{ active:tab === 2}"><a href ng-click="tab = 2">Stats</a></li>
<li ng-class="{ active:tab === 3 }"><a href ng-click="tab = 3">New</a></li>
</ul>
</div>
<div class="col-md-6">
<form class="navbar-form pull-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
</div>
</header>
<section class="wob-main mainlist container" id="headjump">
<!--- ==========================================
Element 1: Overview
============================================= -->
<div class="subsite" ng-show="tab === 1">
<div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div>
<h1>WorkoutBuddy</h1>
<div class="table-responsive" ng-controller="ListController as listing">
<table class="table table-hover">
<thead>
<tr>
<th class="col-md-2">Date</th>
<th class="col-md-8">Type</th>
<th class="col-md-1">Repeat</th>
<th class="col-md-1">Time</th>
</tr>
</thead>
<tbody ng-controller="ListController as listing">
<tr ng-repeat="wo in listing.sessions">
<td>{{wo.date | date:'dd/MM/yyyy'}} </td>
<td>{{wo.name}}</td>
<td>{{wo.repeat}}</td>
<td>{{wo.time}} Minutes</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--- ==========================================
Element 2: Stats
============================================= -->
<div class="subsite" ng-show="tab === 2">
<div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div>
<h1>Stats</h1>
<!-- Ende Subsite -->
</div>
<!--- ==========================================
Element 3: New
============================================= -->
<div class="subsite" ng-show="tab === 3">
<div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div>
<h1>New</h1>
<div class="table-responsive" ng-controller="ListController as listing">
<table class="table table-hover">
<thead>
<tr>
<th class="col-md-2">Date</th>
<th class="col-md-8">Type</th>
<th class="col-md-1">Repeat</th>
<th class="col-md-1">Time</th>
</tr>
</thead>
<tbody ng-controller="ListController as listing">
<tr ng-repeat="wo in listing.sessions | limitTo:2">
<td>{{wo.date | date:'dd/MM/yyyy'}} </td>
<td>{{wo.name}}</td>
<td>{{wo.repeat}}</td>
<td>{{wo.time}} minutes</td>
</tr>
</tbody>
</table>
</div>
<form name="WorkoutForm" ng-controller="EntryController as entryCtrl">
<blockquote>
<h3>Last Workout:</h3>
<strong>{{entryCtrl.wo.name}}</strong><br>
<small>am: {{entryCtrl.wo.date}}</small><br>
{{entryCtrl.wo.repeat}} repeats in {{wo.time}} minutes.
</blockquote>
<input ng-model="entryCtrl.wo.date" type="date" placeholder="date" />
<input ng-model="entryCtrl.wo.name" type="name" placeholder="name" />
<input ng-model="entryCtrl.wo.repeat" type="repeat" placeholder="repeat" />
<input ng-model="entryCtrl.wo.time" type="time" placeholder="time" />
<input type="submit" value="Add" />
</form>
<!-- Ende Subsite -->
</div>
</section>
I styled it with Bootstrap and this is my app.js:
(function(){
var app = angular.module('wobuddy', [ ]);
app.controller('ListController', function(){
this.sessions = wos;
});
var wos = [
{
name: 'Squat',
date: '01.01.2015',
repeat: 50,
time: 10
},
{
name: 'Push Ups',
date: '01.01.2015',
repeat: 50,
time: 10
}
];
})();
Switching between the sections using the nav works pretty fine and also printing out the data-elements in the table, but when I push submit nothing happens - really hope you can help me to learn :-)
You need to make an EntryController that will add a new object to the end of the wos collection. Something like this:
app.controller('EntryController', function($scope) {
$scope.wo = {};
$scope.submit = function() {
wos.push($scope.wo);
$scope.wo = {}; // Clear the form fields
};
});
Then your HTML for that section could look something like this:
<form name="WorkoutForm" ng-controller="EntryController">
<blockquote>
<h3>Last Workout:</h3>
<strong>{{wo.name}}</strong><br>
<small>am: {{wo.date}}</small><br>
{{wo.repeat}} repeats in {{wo.time}} minutes.
</blockquote>
<input ng-model="wo.date" type="date" placeholder="date" />
<input ng-model="wo.name" type="name" placeholder="name" />
<input ng-model="wo.repeat" type="repeat" placeholder="repeat" />
<input ng-model="wo.time" type="time" placeholder="time" />
<button ng-click="submit()">Add</button>
</form>
Notice that it's more usual for a controller to communicate data to the template via the $scope object rather than via the controller object itself.
By looking at you form HTML, I think you missed the name attribute inside your form and also ng-submit directive is missing which will gets called after a submit form. Do check form validation inside controller using $valid() method and perform post else give alert to user.
HTML
<form name="workoutForm" ng-controller="ReviewController as reviewCtrl" ng-submit="submit(workoutForm, entryCtrl.wo)">
<blockquote>
<h3>Last Workout:</h3>
<strong>{{entryCtrl.wo.name}}</strong>
<br>
<small>am: {{entryCtrl.wo.date}}</small>
<br> {{entryCtrl.wo.repeat}} repeats in {{wo.time}} minutes.
</blockquote>
<input name="date" ng-model="entryCtrl.wo.date" type="date" placeholder="date" />
<input name="name" ng-model="entryCtrl.wo.name" type="name" placeholder="name" />
<input name="repeat" ng-model="entryCtrl.wo.repeat" type="repeat" placeholder="repeat" />
<input name="time" ng-model="entryCtrl.wo.time" type="time" placeholder="time" />
<input type="submit" value="Add" />
</form>
Controller
$scope.submit = function(workoutForm, item){
if(workoutForm.$valid)
//then make $http.post by sending item values
else
//show error
};
UPDATE
<html ng-app='demoApp'>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<form ng-controller="validationCtrl">
<input type="text" placeholder="Name...." ng-model="user.name"/>
<input type="text" placeholder="Password...." ng-model="user.pass"/>
<input type="text" placeholder="Mobile...." ng-model="user.mo"/>
<input type="submit" ng-click="alldata(user)"/>
</form>
<script>
//This is controller
var app = angular.module('demoApp', []);
app.controller('validationCtrl', function($scope) {
$scope.alldata=function(user)
{
alert(JSON.stringify(user));
}
});
</script>
</body>
</html>
You can also use this method, and
Your form shoud be like
<form method="post" name="sentMessage" id="my_contact" novalidate="novalidate">
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Name</label>
<input class="form-control" id="name" type="text" name="name" placeholder="Name" required="required" data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Email Address</label>
<input class="form-control" id="email" type="email" name="email" placeholder="Email Address" required="required" data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Phone Number</label>
<input class="form-control" id="phone" type="tel" name="phone" placeholder="Phone Number" required="required" data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Message</label>
<textarea class="form-control" id="message" rows="5" name="Message" placeholder="Message" required="required" data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="form-group">
Send
</div>
</form
import jquery as below
npm install jquery using CLI
import * as $ from 'jquery';
send_query() function will be
send_query() {
var data = $("#my_contact").serializeArray();
var indxarr = {};
$.each(data,function(i,v){
indxarr[v['name']] = v['value'];
});
data = JSON.parse(JSON.stringify(indxarr))
//POST YOUR DATA
this.httpClient.post('http://localhost/rajat/ajax/contact_query_submit/', data,httpOptions)
.subscribe(data => {
console.log(data);
});
}
Your backend code will be
public function contact_query_submit(){
if ($this->input->post()) {
$postdata = file_get_contents("php://input");
$_POST = json_decode($postdata,TRUE);
$addArr = array(
'name' => $this->input->post('name'),
'email' => $this->input->post('email'),
'phone' => $this->input->post('phone'),
'message' => $this->input->post('message'),
'created' => time()
);
if($this->main_model->create('rjt_contact', $addArr)){
$arr[] = array('type' => 'success', 'msg' => '<p>Your query has been received. <br>We will get back to you soon.</p>');
echo json_encode($arr);
}else{
$arr[] = array('type' => 'warning', 'msg' => '<p>'.$this->db->last_query().'</p>');
echo json_encode($arr);
}
}else{
$arr[] = array('type' => 'warning', 'msg' => '<p>No data post yet</p>');
echo json_encode($arr);
}
}
I am trying to send form data from a contact form to a web service by concat string method. I have made a controller who looks like this:
// contact controller
eventApp.controller('contactController', ['$scope', '$http', function($scope, $http) {
$scope.obj = {
val1: 'personName',
val2: 'email',
val3: 'subject',
val4: 'emailMessage'
};
$scope.sendMessage = function(obj) {
var string = '#/path/' + $scope[obj.val1] + '/' + $scope[obj.val2] + '/' + $scope[obj.val3] + '/' + $scope[obj.val4];
//$scope.debug.val = string;
console.log(obj);
};
}]);
How do I make it possible to fill in input values for the values 'personName', 'email', 'subject' and 'emailMessage' like 'John', 'john#email.com', 'webservice' and 'Hello!'? Should I use expressions?
In the DOM console I get an object answer like this when I tap the send button:
Object {val1: "personName", val2: "email", val3: "subject", val4: "emailMessage"}
My HTML is looking like this:
<!-- partial-contact.html -->
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-container">
<!-- Contact Heading -->
<div class="page-header text-center">
<h1><i class="fa fa-comment"></i> Kontakt</h1>
<p>Ved spørsmål skriv ein epost i kontaktskjemaet under.</p>
</div>
<!-- Form -->
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="contactForm" name="contactForm" novalidate ng-submit="contactForm()" ng-controller="contactController" method="post">
<!-- Name -->
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input id="personName" class="form-control" type="text" name="personName" ng-model="contactData.personName" placeholder="Namn *" required />
</div>
<!-- Email -->
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input id="email" class="form-control" type="email" name="email" ng-model="contactData.email" placeholder="Epost *" required />
</div>
<!-- Subject -->
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-info"></i></span>
<input id="subject" class="form-control" type="text" name="subject" ng-model="contactData.subject" placeholder="Emne *" required />
</div>
<!-- Email Message & Button -->
<div class="input-group">
<div class="input-group-btn">
<!-- Email Message -->
<textarea id="emailMessage" type="text" class="form-control" name="emailMessage" ng-model="contactData.emailMessage" ng-minlength=10 ng-maxlength=300 placeholder="Melding..." required></textarea>
<!-- Button -->
<button id="submit" type="submit" class="btn btn-primary" ng-click="sendMessage(obj)"><i class="fa fa-angle-double-right"></i></button>
</div>
</div>
<br>
</form>
</div>
</div>
</div>
contactData is your object in the controller scope holding the data.
use $scope.contactData[obj.val1] instead of $scope[obj.val1]