I am working with AngularJS. I have the following page :
<div ng-controller="UserController">
<h4>Create an account</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputLastName" class="col-sm-2 control-label">Last name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputLastName" placeholder="Enter last name" ng-model="user.lastname">
</div>
</div>
<div class="form-group">
<label for="inputFirstName" class="col-sm-2 control-label">First name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputFirstName" placeholder="Enter first name" ng-model="user.firstname">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" ng-model="user.email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button ng-click="createUser()" class="btn btn-primary">Create account</button>
</div>
</div>
</form>
</div>
I have the UserController :
app.controller('UserController', function ($rootScope, $scope, $location, UserSevice) {
$scope.users = ContactService.list();
$scope.createUser = function () {
UserService.saveUser($scope.user);
$scope.user = {};
}
$scope.deleteUser = function (id) {
UserService.deleteUser(id);
if ($scope.user.id == id) $scope.user= {};
}
$scope.editUser = function (id) {
$scope.user= angular.copy(UserService.get(id));
}
});
Here is the UserService :
app.service('UserServices', function ($http, $location) {
// some logic
}
But i think i have to provide my service provider but i don't know how to do
Error: [$injector:unpr] Unknown provider: UserSeviceProvider <- UserSevice
http://errors.angularjs.org/1.2.25/$injector/unpr?p0=UserSeviceProvider%20%3C-%20UserSevice
at http://localhost:8080/app-web/js/lib/angular.js:78:12
at http://localhost:8080/app-web/js/lib/angular.js:3802:19
at Object.getService [as get] (http://localhost:8080/app-web/js/lib/angular.js:3930:39)
at http://localhost:8080/app-web/js/lib/angular.js:3807:45
at getService (http://localhost:8080/app-web/js/lib/angular.js:3930:39)
at invoke (http://localhost:8080/app-web/js/lib/angular.js:3957:13)
at Object.instantiate (http://localhost:8080/app-web/js/lib/angular.js:3977:23)
at http://localhost:8080/app-web/js/lib/angular.js:7281:28
at http://localhost:8080/app-web/js/lib/angular.js:6670:34
at forEach (http://localhost:8080/app-web/js/lib/angular.js:332:20) <div ng-view="" class="ng-scope">
You have a typo:
app.service('UserServices', function ($http, $location) {
But you're injecting UserService (UserSevice actually -- a few typos I guess)
Related
I'm writing a form that binds inputs with a angularJS model. For some reason, only certain fields are bound to the model (vm.customer). For example, vm.last_name, and vm.email are bound. But vm.first_name and vm.gender are not bound from inputs to model.
/* AddCustomer.js */
(function (angular) {
'use strict';
angular.module('app', []);
function controller($scope) {
var vm = this;
vm.genders = ["Male", "Female", "Other"];
vm.customer = {
first_name: 'Susan',
last_name: 'BOyle',
email: 's.boyle#singwell.com',
ip_address: '192.168.1.120',
gender: vm.genders[1]
}
vm.addCustomer = function($scope) {
console.log("bout to add a user");
};
vm.$onInit = function() {
};
}
// dep. injecion
controller.$inject = ['$scope'];
angular
.module('app')
.controller('AddCustomer', controller);
})(window.angular);
This is the html file
/* add-customer-view.html */
<form ng-app="app" ng-controller="AddCustomer as vm">
<pre>
customer = {{ vm.customer | json }}
</pre>
<div class="form-row">
<div class="form-group col-md-6">
<label>First</label>
<input class="form-control" type="text" ng-model"vm.customer.first_name" ng-model-options="{ updateOn: 'blur' }">
</div>
<div class="form-group col-md-6">
<label>Last</label>
<input class="form-control" type="text" ng-model="vm.customer.last_name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="col-form-label">Email</label>
<input class="form-control" type="email" ng-model="vm.customer.email">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<div class="form-check form-check-inline" ng-repeat="gender in vm.genders">
<input type="radio" name="gender" ng-model"vm.customer.gender" value="vm.genders[{{$index}}]">
<label class="form-check-label">{{ gender }}</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="col-form-label">IP Address</label>
<input class="form-control" type="text" ng-model="vm.customer.ip_address">
</div>
</div>
<div class="form-row">
<button type="submit" class="btn btn-primary" ng-click="vm.addCustomer()">Add Customer</button>
</div>
Link to code segments: https://codepen.io/nmnduy/pen/ypvddZ. Any insight would be very helpful!
1) You miss = operator on both cases (first_name, gender)
2) You need to replace input's value as follows:
<input type="radio" name="gender" ng-model="vm.customer.gender" value="{{gender}}">
I'm newbie in angularJS. I have finished phone-cat tutorial on the official angular document. I am trying to create some new feature for it such as ( create a new item , edit ... ) Assume that I created api for this.
app/phone-create/phone-create.module.js
angular.module('phoneCreate', ['core.phone'])
app/phone-create/phone-create.component.js
angular.module('phoneCreate')
.component('phoneCreate', {
templateUrl: 'phone-create/phone-create.template.html',
controller: ['Phone', '$scope',
function PhoneCreateController(Phone, $scope) {
var self = this;
var data = {
name: $scope.name,
description: $scope.description,
kind: $scope.kind
}
self.create = function () {
console.log(data); // {name : underfined , desciprion : underfined , kind : underfined}
}
}
]
});
app/phone-create/phone-create.template.html
<div class="row">
<div class="form-horizontal col-md-8">
<div class="form-group">
<label class="control-label col-sm-4" for="name">Name</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.name" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="description">Description</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.description" class="form-control" id="description" placeholder="description">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="kind">Kind</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.kind" class="form-control" id="kind" placeholder="Kind">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button type="submit" ng-click="$ctrl.create()" class="btn btn-default">Create</button>
</div>
</div>
</div>
</div>
When I click Create , I want to fields in input will be accessed by scope in controller but it is underfined. I don't know why and how to fix. Please help me!.
Let's take a look at these three lines:
<input type="text" ng-model="$ctrl.name" class="form-control" id="name" placeholder="Name">
<input type="text" ng-model="$ctrl.description" class="form-control" id="description" placeholder="description">
<input type="text" ng-model="$ctrl.kind" class="form-control" id="kind" placeholder="Kind">
They have ng-models: $ctrl.name, $ctrl.description, $ctrl.kind. Your component doesn't declare those variables.
Change them to $ctrl.data.name, $ctrl.data.description, $ctrl.data.kind and modify your component:
angular.module('phoneCreate')
.component('phoneCreate', {
templateUrl: 'phone-create/phone-create.template.html',
controller: ['Phone', '$scope',
function PhoneCreateController(Phone, $scope) {
var self = this;
self.data = {
name: "",
description: "",
kind: ""
};
self.create = function () {
console.log(self.data);
};
}
]
});
OPTION 1 :
angular.module('phoneCreate')
.component('phoneCreate', {
templateUrl: 'phone-create/phone-create.template.html',
controller: ['Phone', '$scope',
function PhoneCreateController(Phone, $scope) {
var self = this;
self.create = function () {
console.log(self.name); // {name : underfined , desciprion : underfined , kind : underfined}
}
}
]
});
OPTION 2 :
angular.module('phoneCreate')
.component('phoneCreate', {
templateUrl: 'phone-create/phone-create.template.html',
controller: ['Phone', '$scope',
function PhoneCreateController(Phone, $scope) {
var self = this;
// No need to initialise self.data
self.data = {
name: '',
description: '',
kind: ''
}
self.create = function () {
console.log(self.data);
console.log(self.data.name);
}
}
]
});
HTML :
<div class="row">
<div class="form-horizontal col-md-8">
<div class="form-group">
<label class="control-label col-sm-4" for="name">Name</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.data.name" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="description">Description</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.data.description" class="form-control" id="description" placeholder="description">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="kind">Kind</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.data.kind" class="form-control" id="kind" placeholder="Kind">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button type="submit" ng-click="$ctrl.create()" class="btn btn-default">Create</button>
</div>
</div>
</div>
</div>
I'm getting this error when running my application. This error comes in only one controller. I have done other controllers in the same way but in this particular controller I get this following error.
Argument 'questionAddCtrl' is not a function, got undefined
Controller:
;
(function () {
'use strict';
angular.module('app').controller('questionAddCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.data = {
question: '',
ans1: '',
ans2: '',
ans3: '',
ans4: '',
ans5: '',
correct_ans: ''
};
$scope.submit = function (selectData) {
console.log("submit pressed");
var questionAddRequest = {
"question": selectData.question,
"answerOne": selectData.ans1,
"answerTwo": selectData.ans2,
"answerThree": selectData.ans3,
"answerFour": selectData.ans4,
"answerFive": selectData.ans5,
"correctAnswer": selectData.correct_ans
};
var url = 'http://localhost/AwtCW2012002/api/restApiController/question.json';
$scope.jsonData = JSON.stringify(questionAddRequest);
console.log(questionAddRequest);
console.log();
$http({
method: 'POST',
url: url,
data: questionAddRequest
}).then(function (response) {
console.log(response);
$scope.data = {
question: '',
ans1: '',
ans2: '',
ans3: '',
ans4: '',
ans5: '',
correct_ans: ''
};
});
}
}]);
})();
Views:
<div class="container" ng-controller="questionAddCtrl">
<form class="form-horizontal" role="form" name='quizAdd' ng-submit="submit(data)">
<div class="form-group">
<label class="control-label col-sm-2" for="question">Question:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="question" ng-model="data.question" placeholder="Enter Question">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="answer1">Answer 1:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer1" ng-model="data.ans1" id="answer1" placeholder="Enter Answer 1">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="answer2">Answer 2:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer2" ng-model="data.ans2" id="answer2" placeholder="Enter Answer 2">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="answer3">Answer 3:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer3" ng-model="data.ans3" id="answer4" placeholder="Enter Answer 3">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="answer4">Answer 4:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer4" id="answer4" ng-model="data.ans4" placeholder="Enter Answer 4">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="answer5">Answer 5:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer5" id="answer5" ng-model="data.ans5" placeholder="Enter Answer 5">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="sel1">Select Correct Answer:</label>
<div class="col-sm-10">
<select class="form-control" ng-model="data.correct_ans" id="sel1">
<option>{{data.ans1}}</option>
<option>{{data.ans2}}</option>
<option>{{data.ans3}}</option>
<option>{{data.ans4}}</option>
<option>{{data.ans5}}</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
Try to set the array of dependencies that your module requires, like so:
angular.module('app', []);
instead of
angular.module('app');
I have a modal:
<%#taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%#taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
<fields:form formName="brand.id.form">
<input type="hidden" name="brandid" value="{{item.brandid}}"/>
</fields:form>
<fields:form formName="brand.form">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" value="{{item.name}}" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-checked="item.isactive" name="isactive" value="1"/>
</div>
</div>
</fields:form>
<div class="form-actions">
<a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
<a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
</div>
</form>
</div>
</div>
</div>
and its modal controller:
app.controller("BrandCtrl", function ($scope, $http, $modal) {
$scope.animationsEnabled = true;
$scope.open = function (id) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: '/admin.brands/edit',
controller:gg,
resolve: {
item: function($http) {
return $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id)
.then(function(response) {
return response.data;
});
}
}
});
}
});
var gg = function ($scope, $modalInstance, $http, item) {
$scope.item = item;
$scope.ok = function () {
$http.post('/admin.brands/updateBrandAndGetJSON', {id:$scope.brandid, name:$scope.brandname, isactive:$scope.isactive}).
success(function(data, status, headers, config) {}).
error(function(data, status, headers, config) {});
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss();
};
}
This way I can't get the input values in $http.post in $scope.ok function so I tried add ng-models to form fields in modal
<%#taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%#taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
<fields:form formName="brand.id.form">
<input type="hidden" ng-model="item.brandid" name="brandid"/>
</fields:form>
<fields:form formName="brand.form">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" ng-model="item.name" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-model="item.isactive" ng-checked="item.isactive" name="isactive" value="1"/>
</div>
</div>
</fields:form>
<div class="form-actions">
<a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
<a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
</div>
</form>
</div>
</div>
</div>
but now, I can't load values from modal controller to input fields.
ng-model and expression conflicted.
How can I load values from modal controller and get it in ok function ?
Try this,
Remove expressions used
In the controller, after setting $scope.item initiate brandid as $scope.brandid=angular.copy($scope.item.brandid);
Likewise for other fields.
OR
In your current approach you can try giving $scope.$apply() after setting $scope.item; This is an indirect approach. No need to do like this.
I am calling some values from the database and putting them in a select box in a form, however, whenever i click on submit, it submits an empty value, i am thinking its because i am using multiple controllers in the form, from what i have gathered, i have to do something with scope in the controllers, but i have been unable to do that
Attached is a copy of the create-view file, the highlited portions are the multiple controllers.
Please how do i make it work? Thank you very much
<section data-ng-controller="CandidatesController">
<div class="page-header">
<h1>New Candidate</h1>
</div>
<div class="col-md-12">
<form class="form-horizontal" data-ng-submit="create()" novalidate>
<fieldset>
<div class="form-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" data-ng-model="name" id="name" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="vision">Vision</label>
<div class="controls">
<textarea data-ng-model="vision" id="vision" class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label" for="dob">Date Of Birth</label>
<div class="controls">
<input type="date" data-ng-model="dob" id="dob" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="post">Post</label>
<div class="controls">
<select data-ng-model="post" id="post" class="form-control">
<option value="Presidential">PRESIDENTIAL</option>
<option value="Provincial">PROVINCIAL</option>
<option value="Municipal">MUNICIPAL</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label" for="province">Province</label>
<div class="controls">
<select data-ng-model="province" id="province" class="form-control">
<option value="Gauteng">Gauteng</option>
<option value="Free-State">Free-State</option>
<option value="Kwazulu-Natal">Kwazulu-Natal</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label" for="municipal">Municipal</label>
<div class="controls">
<input type="text" data-ng-model="municipal" id="municipal" class="form-control" placeholder="municipal" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="party">Party</label>
<div class="controls">
<section data-ng-controller="PartiesController" data-ng-init="find()">
<select data-ng-model="party" class="form-control" ng-options="party.name for party in parties track by party.name">
</select>
</section>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default">
</div>
<div data-ng-show="error" class="text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
</section>
The candidate controller code
'use strict';
//Candidates controller
angular.module('candidates').controller('CandidatesController', ['$scope', '$stateParams', '$location', 'Authentication', 'Candidates',
function($scope, $stateParams, $location, Authentication, Candidates ) {
$scope.authentication = Authentication;
// Create new Candidate
$scope.create = function() {
// Create new Candidate object
var candidate = new Candidates ({
name: this.name,
vision: this.vision,
dob: this.dob,
post: this.post,
province: this.province,
municipal: this.municipal,
party: this.party
});
// Redirect after save
candidate.$save(function(response) {
$location.path('candidates/' + response._id);
// Clear form fields
$scope.name = '';
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
// Remove existing Candidate
$scope.remove = function( candidate ) {
if ( candidate ) { candidate.$remove();
for (var i in $scope.candidates ) {
if ($scope.candidates [i] === candidate ) {
$scope.candidates.splice(i, 1);
}
}
} else {
$scope.candidate.$remove(function() {
$location.path('candidates');
});
}
};
// Update existing Candidate
$scope.update = function() {
var candidate = $scope.candidate ;
candidate.$update(function() {
$location.path('candidates/' + candidate._id);
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
// Find a list of Candidates
$scope.find = function() {
$scope.candidates = Candidates.query();
};
// Find existing Candidate
$scope.findOne = function() {
$scope.candidate = Candidates.get({
candidateId: $stateParams.candidateId
});
};
}
]);