My UI starts out with two text boxes, one for the users email address and the other for the users Name:
<input type="text" data-ng-model="contact.email_address" placeholder="Email Address" /><br />
<input type="text" data-ng-model="contact.name" placeholder="Name" />
I am leaving it as basic as I can because I have tried many different ways to get this completed and because I am moving from jQuery to AngularJS, I am getting confused on how to get this done.
I need to have a button where, if there needs to be multiple users, they click on this button, and another set of text boxes appear. I can do this, but I do not know how to combine it with the next part. This is what I do to add X amount of users to an array. I wrote the HTML like the following:
<body data-ng-app="controllerAsRecipient">
<div class="form-group" id="ctrl-as-exmpl" data-ng-
controller="SettingsController">
<ul>
<li data-ng-repeat="contact in contacts track by $index">
<input type="text" data-ng-model="contact.email_address" placeholder="Email Address" /><br />
<input type="text" data-ng-model="contact.name" placeholder="Name" />
</li>
<li>
<button data-ng-click="addContact()">Add Recipients</button>
</li>
</ul>
</div>
The AngularJS looks like:
angular.module('controllerAsRecipient', [])
.controller('SettingsController', function ($scope) {
$scope.contacts = [];
$scope.addContact = function() {
$scope.contacts.push({ email_address: '', name: '' })
}
});
Now the part that I am stuck on is inserting the email address/name array, is how to make an AJAX request that will pass this data to the API. The parameter will be the the array of email/name values, however many there are, whether it is one or 50. I can easily do it in jQuery, using $.ajax, but I do not know how to do it in AngularJS, as I have yet to do it.The above works fine, but I am not opposed to tearing it all apart and having it completely different, if there is an easier way to do it. As I said, I can do this in jQuery with ease, but do not know how to do it (yet) in AngularJS. If anyone could help me, I would be grateful. If I need to be more specific, please let me know and I will write a new question. thank you very much in advance.
Try to use $http, inject into your controller, and make the promise call
angular.module('controllerAsRecipient', [])
.controller('SettingsController', function ($scope, $http) {
$scope.contacts = [];
$scope.addContact = function() {
$scope.contacts.push({ email_address: '', name: '' })
};
$scope.sendInfo = function(){
$http({
method: 'POST'
url: 'your url api',
data: contacts
}).then(function(response){
//if response success
}, function(error){
//if error
});
};
});
Related
I am a beginner at Angular JS and trying to understand this concept. I have a JSON API which consist of product list and have used $hhtp.get to fetch and show the output in the view.
All i want to understand, if the problem statement asks for showing the number of hits/calls made to API in HTML. How to do that.
Here is my sample code
var app = angular.module('FusionApp', []);
app.controller('HomeController', ['$scope', 'displayproducts', function ($scope, displayproducts) {
displayproducts.success(function (data) {
$scope.show = data.products;
//get the product count
$scope.productCount = $scope.show.length;
});
}]);
Here is the HTML view
<div ng-controller="HomeController">
<div class="form-group">
<span ng-model="productCount">Product Count: {{productCount}}</span> |
<span ng-model="apiCount">API Hits:</span>
<p><input type="text" ng-model="name" placeholder="Search by Name" /</p>
</div>
</div>
Appreciate if you guide here. Note displayProducts is the factory service call to return the data
I know Customizing out of the box typeahead directive is not a good idea, so went ahead and created another directive called type-ahead-custom for my customization.
here's plunker https://plnkr.co/edit/PmYRm37Uqn6CFYAXuUcl
OUTPUT
s = no results displayed on ui, even though we got back data from server.
so = Now you see the results of previous query results i.e 's', even though we got back data for 'so'
sou = Now you see the results of previous query results i.e 'so', even though we got back data for 'sou'
this continues.
HTML
<div ng-app="exampleApp">
<form class="form-horizontal" ng-controller="myCtrl" >
<div class="form-group">
<div>
<label for="account" class="col-sm-2 col-md-2 control-label customize-label ">Typeahead</label>
<div class="col-sm-8">
<div class="inner-addon right-addon">
<input type="text" ng-model="selectedOptions.planes" uib-typeahead="plane as plane.formatted_address for plane in data" type-ahead-custom="maps" typeahead-loading="loadingdata" typeahead-no-results="noResults" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" aria-autocomplete="list" aria-expanded="false" aria-owns="typeahead-4-8758" />
</div>
</div>
</div>
</div>
</form>
</div>
for example in above code type-ahead-custom="maps"is my directive, here i supply the table name to get data from (here for example sake i am just passing a string).
Javascript
var exampleApp = angular.module('exampleApp', ['ui.bootstrap']);
exampleApp.directive('typeAheadCustom', function($http) {
return {
priority: 1,
link: function($scope, $element, $attributes) {
$scope.data = [];
$scope.$watch($attributes.ngModel, function(newValue, oldValue) {
$http.get('//maps.googleapis.com/'+$attributes.typeAheadCustom+'/api/geocode/json', {
params: {
address: newValue,
sensor: false
}
}).success(function(data) {
$scope.data = data.results;
});
});
}
}
});
Since the DOM has both directive type-ahead-custom and uib-typeahead, i have given my directive priority:1 to make it executes first.
Problem: with my directive in place, typeahead seems to lag one $http request behind while showing the data on UI.
For example, if you start by typing.
I am not sure why this is happening or how to fix this. Any pointers will be helpful.
Using $q service helped me with the same issue. I modified your code a little bit.
In your index.html change plane in data to plane in search($viewValue)
<input type="text" ng-model="selectedOptions.planes" uib-typeahead="plane as plane.formatted_address for plane in search($viewValue)" type-ahead-custom="maps" typeahead-loading="loadingdata" typeahead-no-results="noResults" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" aria-autocomplete="list" aria-expanded="false" aria-owns="typeahead-4-8758" />
And in your link replace watcher with the search function that returns a promise.
$scope.search = function(newValue) {
var dfr = $q.defer();
$http.get('//maps.googleapis.com/'+$attributes.typeAheadCustom+'/api/geocode/json', {
params: {
address: newValue,
sensor: false
}
}).success(function(data) {
dfr.resolve(data.results);
});
return dfr.promise;
};
And of course, you need to inject $q service:
exampleApp.directive('typeAheadCustom', function($http, $q) {
...
Working plnkr exampe: https://plnkr.co/edit/oJBoV5M58tLHMvvSAOkS
Hi I have converted a previous function for editing records in an api into the following resource:
app.factory("Wine", function($resource){
return $resource("http://greatwines.8000.com/wines:id", {
//id as a variable
id: "#id"
},
{
update: {
method: "PUT"
}
});
});
I now want to use this by triggering a form with the "wine" records to edit with the following CTA inside the wine ng-repeat for each wine:
Edit Wine
In my controller I pass the "Wine" resource:
app.controller("editWineCtrl", function ($scope, $http, $routeParams, Wine, $location){
Wine.get({ id: $routeParams.id }, function(wine){
$scope.wine = wine;
});
...
However, in spite of the form URL returning the ID:
http://greatwines.8000.com/#/wines/1323
None of the fields i.e. :
div class="margin-top-20">
<input type="text" class="form-control" ng-model="wine.year" />
</div>
<div class="bold margin-top-20">
Grapes
</div>
<div class="margin-top-20">
<input type="text" class="form-control" ng-model="wine.grapes" />
</div>
Are being populated. Am I using the resource int he correct way?
There is a typo in url
wines:id
It should be
wines/:id
I am bringing in some simple data via a service that uses angular-resource like so:
angular.module('InvoiceService',
['ngResource'])
.factory('InvoiceService', function ($resource) {
return $resource('data.json');
})
.controller("DashboardListCtrl", function (InvoiceService) {
var vm = this;
InvoiceService.query(function (data) {
vm.invoices = data;
});
vm.submit = function (form) {
console.log(form)
};
});
And the html:
<form name="invoices" role="form" novalidate>
<ul>
<li ng-repeat="invoice in vm.invoices">
<input type="checkbox" id="{{'id-' + $index}}" />
<p><strong>Order:</strong></p>
<p>{{invoice.order}}</p>
</li>
<input type="submit" value="Continue" ng-click="vm.submit(invoices)" />
</ul>
</form>
Everything works fine; the data is displays in the view as expected.
The question:
What I'd like to do is be able to select a checkbox, grab the bit of data associated with that checkbox, and pass it along to the next controller/view on submit. How can I do this?
So, what do I do next? Am I on the right track?
**EDIT: added all angular code to help clarify
Posting answer as reply too big to be useful.
You should be using $scope to isolate the controller's data from the rest of the page.
Read up about ng-model http://docs.angularjs.org/api/ng/directive/ngModel and how to use it to two-way-bind checkbox value to a controller variable. No need to use theFormName if you call $scope.submit = function() { } as your ng-model variable will be available in $scope already.
angular.module('InvoiceService',
['ngResource'])
.factory('InvoiceService', function ($resource) {
return $resource('data.json');
})
.controller("DashboardListCtrl", function ($scope, InvoiceService) {
InvoiceService.query(function (data) {
$scope.invoices = data;
});
$scope.submit = function () {
// FIXME to access a property of each $scope.invoices
console.log('checkbox1=' + $scope.invoices[0].checkbox1);
};
});
Then the HTML:
<form role="form" novalidate ng-controller="DashboardListCtrl"><!-- EDIT: added ng-controller=, remove name= -->
<ul>
<li ng-repeat="invoice in invoices"><!-- EDIT: remove 'vm.' -->
<input type="checkbox" id="{{'id-' + $index}}" ng-model="invoice.checkbox1" /><!-- EDIT: added ng-model= -->
<p><strong>Order:</strong></p>
<p>{{invoice.order}}</p>
</li>
<input type="submit" value="Continue" ng-click="submit()" /><!-- EDIT: remove 'vm.' -->
</ul>
</form>
This must be something really silly. I cannot get a simple form to work.
Worked through the bunch of links that google spits out but none helped.
I alwajs get the $scope.user undefined below.
This is the form ...
<form name="login" ng-submit="submitLogin()" ng-controller="LoginController">
<ul>
<li>
<input type="text" name="name" ng-model="user.name" placeholder="Username:">
</li>
<li>
<input type='password' name="pass" ng-model="user.pass" placeholder="Password:">
</li>
</ul>
<button type="submit">Submit</button>
</form>
And this is the controller...
basal.controller('LoginController', function($scope, $http) {
$scope.submitLogin = function() {
$http.post('/users', $scope.user)
.success(function(data) {
console.log(data);
alert("Form post good!");
})
.error(function() {
alert(angular.toJson($scope.user));
});
};
});
What am I doing wrong?
How does bi-direction works? How do we know of when the data is passed from the controller to the view and the other way round - from the view to the controller. I get the feeling that this is where my misunderstanding lies.
Thanks.
Your user is never defined or initialised.
Try username and userpass as ng-model definitions like this:
<li>
<input type="text" name="name" ng-model="username" placeholder="Username:">
</li>
<li>
<input type='password' name="pass" ng-model="userpass" placeholder="Password:">
</li>
And then add accordingly
$http.post('/users', {name: $scope.username, pass: $scope.userpass})
Or, as mentioned in the comments, define $scope.user as {} in your Controller
Initialize $scope.user = {} in the first line of your controller.
basal.controller('LoginController', function($scope, $http) {
$scope.user = {};
$scope.submitLogin = function() {
...
In your example, $scope.user == null. The form doesn't create a new object container for you.