I want to use the value of a radio button and implement that into an api link but its not linking for some reason.
heres my code
JS
myApp.controller('HomeController', ['$scope', '$http',
function($scope, $http) {
$scope.formData = {};
$scope.doIt = function() {
$scope.targetURL = ('https://api.api/' + $scope.formData + '/us/profile');
$http.get($scope.targetURL)
.success(function(results) {
$scope.data = results.data;
});
};
}
]);
HTML
<div class="container-fluid">
<div class="background">
<div class="transbox">
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-3">
<label><input type="radio" name='radio' value="pc" ng-model="formData"><img src="../img/battlenet.png"></label>
<label><input type="radio" name='radio' value="psn" ng-model="formData"><img src="../img/playstation.png"></label>
</div>
<div class="col-lg-5">
</div>
</div>
<div class="row">
<div class="col-lg-9">
<input class="form-control" type="text" placeholder="Enter Gamertag">
</div>
<div class="col-lg-3">
<button type="submit" class="btn btn-default" ng-click="doIt()"> Submit </button>
</div>
</div>
</div>
</div>
This works well fiddle:
myApp.controller('HomeController', ['$scope', '$http',
function($scope, $http) {
$scope.formData = {};
$scope.doIt = function() {
$scope.targetURL = ('https://api.api/' + $scope.formData + '/us/profile');
$http.get($scope.targetURL)
.success(function(results) {
$scope.data = results.data;
});
};
}
]);
And your HTML:
<div ng-app="myApp">
<div ng-controller="HomeController">
<div class="container-fluid">
<div class="background">
<div class="transbox">
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-3">
<label><input type="radio" name='radio' value="pc" ng-model="formData"><img src="../img/battlenet.png"></label>
<label><input type="radio" name='radio' value="psn" ng-model="formData"><img src="../img/playstation.png"></label>
</div>
<div class="col-lg-5">
</div>
</div>
<div class="row">
<div class="col-lg-9">
<input class="form-control" type="text" placeholder="Enter Gamertag">
</div>
<div class="col-lg-3">
<button type="submit" class="btn btn-default" ng-click="doIt()"> Submit </button>
</div>
</div>
</div>
</div>
</div>
</div>
I think you are not calling the controller, at least in your example it is not. If you check the network tab in the chrome console for the requests, you will see the correct data is sent:
https://api.api/pc/us/profile
https://api.api/psn/us/profile
Related
i want to do something like this: When i fill in the deatils i.e name and password and click on login it should display the details With welcome message(in modal or popup in angular) that i have filled in the textbox . it should be simple. Can anyone help me with that. I had a look in UI bootstrap modal but i am not getting anything from that.
<div ng-controller="logincontroller">
<div class="container-fluid">
<form action="" method="" class="register-form">
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label for="firstName">NAME</label>
<input name="firstName" minlength="3" maxlength="15" required class="form-control firstname" type="text" >
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label for="password">PASSWORD</label>
<input name="password" required class="form-control password" type="password" >
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<button class="btn btn-default regbutton" ng-click="open()">Login</button>
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancel()">No</button>
<button type="button" class="btn btn-primary" ng-click="ok()">Yes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
my login.js file
var mymodule=angular.module("mymodule");
mymodule.controller("logincontroller",function($scope,$modal)
{
var modalInstance = $modal.open({
backdrop:'static',
keyboard:false,
controller: function($scope, $modalInstance) {
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
$scope.ok = function () {
$modalInstance.close();
};
}
});
})
i am getting error like this
Error: $injector:unpr
Unknown Provider
Unknown provider: $modalProvider <- $modal <- logincontroller
Check this answer. It might help you out.
var app = angular.module('angularModal', ['ngAnimate', 'ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
firstName: function () {
return $scope.firstName;
}
}
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, firstName) {
setTimeout(function() {
$scope.$apply(function() {
$scope.firstName = firstName;
})
}, 1);
$scope.ok = function () {
$modalInstance.close($scope.firstName);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
<!DOCTYPE html>
<html data-ng-app="angularModal">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.0.js"></script>
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
Welcome {{firstName}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<div class="container-fluid">
<form method="" class="register-form">
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label for="firstName">NAME</label>
<input name="firstName" minlength="3" maxlength="15" required class="form-control firstname" type="text" ng-model="firstName">
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label for="password">PASSWORD</label>
<input name="password" required class="form-control password" type="password" >
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<button class="btn btn-default regbutton" ng-click="open()">Login</button>
</div>
</div>
</form>
</div>
</body>
</html>
I'm trying to create an upload function using angularjs. I have watch and read few tutorials in the internet. Unfortunately all the tutorials are too complicated for me because I'm still new in this field.
<form ng-submit="upload(currentUser())">
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Car</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Perodua Myvi" class="form-control" ng-model="newCar" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Price(RM) per day</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="80" class="form-control" ng-model="newPrice" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Business Area</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Universiti Malaysia Sabah" class="form-control" ng-model="businessArea" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Insert Car Image</label>
<br>
</div>
<div class="col-xs-5">
<!--<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Image
</button>-->
<input type="file"/>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-5">
<button type="submit" class="btn btn-primary btn-sm pull-right">
<span class="glyphicon glyphicon-globe"></span> Publish
</button>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<br>
<br>
</form>
app.controller('postadCtrl', [
'$scope',
'auth',
function($scope, auth) {
$scope.currentUser = auth.currentUser;
$scope.posts = [];
$scope.upload = function(user) {
$scope.posts.push({
company_name: user,
car_type: $scope.newCar,
seaters: 5,
price: $scope.newPrice,
contact: 038880000,
location: $scope.businessArea
});
};
}
]);
So how do I do this in the simplest form and explanation? And how does my router and module will look like?
The output should look like this.
ng-repeat is not updating DOM nodes when we use same controller name in different area.
<div ng-controller="customer">
<div ng-repeat="number in numberArray">
{{number}}
</div>
</div>
<div ng-controller="customer">
<div ng-repeat="number in numberArray">
{{number}}
</div>
<input type="text" ng-model="ncDialText"/>
<button ng-click="add()"/>
</div>
myApp.controller('customer',function($scope, $http) {
$scope.numberArray =[];
$scope.add = function() {
$scope.numberArray.push($scope.ncDialText);
}
});
The problem is that the ng-controller creates a new instance of each controller so the scope is different in the two ng-repeat directives.
One way to fix that is to have a controller that covers both ng-repeats
<div ng-app="myApp" ng-controller="customer">
<div >
<div ng-repeat="number in numberArray">
{{number}}
</div>
</div>
<div >
<div ng-repeat="number in numberArray">
{{number}}
</div>
<input type="text" ng-model="ncDialText"/>
<button ng-click="add()">Add</button>
</div>
</div>
The other option is to use a service to store the data like this JSFiddle
Javascript:
var myApp = angular.module('myApp', []);
myApp.factory('customerService', function() {
var _self = this;
_self.numberArray = [];
return {
numberArray: _self.numberArray
}
});
myApp.controller('customer',function($scope, $http, customerService) {
$scope.numberArray = customerService.numberArray;
$scope.add = function() {
customerService.numberArray.push($scope.ncDialText);
}
});
HTML:
<div ng-app="myApp">
<div ng-controller="customer">
<div ng-repeat="number in numberArray">
{{number}}
</div>
</div>
<div ng-controller="customer">
<div ng-repeat="number in numberArray">
{{number}}
</div>
<input type="text" ng-model="ncDialText"/>
<button ng-click="add()">Add</button>
</div>
</div>
I'm running into some problems with Angular 1.3.2
I'm expecting to see the formData object being populated with whatever is being typed in the input fields
I have the following code.
angular.module('formApp', [])
.controller('FormController', function ($scope, $http) {
$scope.formData = {};
$scope.processForm = function () {
};
});
<div class="form-container" ng-app="formApp" ng-controller="FormController">
<div class="container">
<form>
<div id="name-group" class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name">
<span class="help-block"></span>
</div>
<div id="superhero-group" class="form-group">
<label>Superhero Alias</label>
<input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader"
ng-model="formData.superheroAlias">
<span class="help-block"></span>
</div>
<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</form>
<pre>
{{ formData }}
</pre>
</div>
</div>
you have a typo in your ngcontroller syntax. it should be ng-controller
<div class="form-container" ng-app="formApp" ng-controller="FormController">
Copied your code and it is working, see below:
angular.module('formApp', [])
.controller('FormController', function ($scope, $http) {
$scope.formData = {};
$scope.processForm = function () {
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="form-container" ng-app="formApp" ng-controller="FormController">
<div class="container">
<form>
<div id="name-group" class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name">
<span class="help-block"></span>
</div>
<div id="superhero-group" class="form-group">
<label>Superhero Alias</label>
<input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader"
ng-model="formData.superheroAlias">
<span class="help-block"></span>
</div>
<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</form>
<pre>
{{ formData }}
</pre>
</div>
</div>
MY issue is this:
When I request the data from the server this sent the data correctly but in LoginController after doing the validation I'm trying to populate the user's username and email but those variables are not being printed in the template. However if I just send those variables in a simple JSON such as $scope.details = [{ 'username':'Karman', 'username':'karman#mail.com'}]; it's working fine, what am I doing wrong? Is there some issue with ng-repeat directive?
Thanks in advance to whom can help me out with this issue.....
ps: I'm using sillex and ng-resource just in case
<body ng-controller="LoginController">
<div class="col-xs-3 details-user">
<div class="col-xs-1">
<img src="web/img/avatar.jpg" alt="..." class="img-circle">
</div>
<div class="col-xs-2">
<ul>
<li ng-repeat="detail in details">
{{detail.username}} -- {{detail.email}}
</li>
</ul>
</div>
</div>
Controller:
function LoginController($scope, Login) {
var currentResource;
$scope.login = function () {
Login.query({email: $scope.email}, function success(data){
$scope.details = data;
//$scope.details = [{ 'username':'Karman', 'username':'karman#mail.com'}];
});
}
}
Form:
<!-- Main DIV -->
<div id="login" class="login-main">
<div class="form-wrap">
<div class="form-header">
<i class="fa fa-user"></i>
</div>
<div class="form-main">
<form>
<div class="form-group">
<input ng-model="email" type="text" class="input-large" placeholder="Tu email aqui..." required>
<input ng-model="password" type="password" class="input-large" placeholder="Tu password aqui..." required>
</div>
<button ng-click="login()" ng-show='addMode' class="btn btn-success">Sign In</button>
</form><!-- end form -->
</div><!-- end div form-main -->
<div class="form-footer">
<div class="row">
<div class="col-xs-7">
<i class="fa fa-unlock-alt"></i>
Forgot password?
</div>
<div class="col-xs-5">
<i class="fa fa-check"></i>
Sign Up
</div>
</div>
</div>
</div>
</div>