I have a detail view and from database only single record is comming, I need to assign data to controls. below is my code
var app = angular.module("MyProductApp", []);
app.controller("ProductsController", function ($scope, $http) {
var ProductID = #Html.Raw(Json.Encode(ViewData["ProductID"]));
$http.get('/api/Products/GetProductForEditOrDetail',{params: { ProductID : ProductID }}).
success(function(data){
$scope.Product = data;
}).
error(function(data){
alert("msg");
});
});
and below is html code
<div ng-app="MyProductApp" class="form-horizontal">
<div ng-controller="ProductsController">
<h4>Product</h4>
<hr />
<div class="form-group" >
<label class="control-label col-md-2">Product Name</label>
<div class="col-md-10">
<input id="txtProductName" type="text" class="form-control" name="txtProductName" disabled="disabled" Value="{{Product.ProductName}}" />
<input id="hdnProductID" type="hidden" class="form-control" name="hdnProductID" value="{{Product.ProductID}}" />
<input id="hdnCategoryID" type="hidden" class="form-control" name="hdnCategoryID" value="{{Product.CategoryID}}" />
</div>
</div>
</div>
</div>
You should use ngModel directive
The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
<input ng-model="Product.ProductName" />
ngModel is what you are looking for, read the docs !
You wanted to pass value with hidden fields, so ng-model would not work in that case, you could use ng-value in that case
<input id="hdnCategoryID" type="hidden" class="form-control" name="hdnCategoryID" ng-value="Product.CategoryID" />
Related
I am still new in angular, I don't know how to make form when I want to update user to fill the form with his own data. I have controller like this:
// take data for organization from database
dataService.allOrganization().then(function (data) {
vm.allOrg = data;
});
// take data for user from database
dataService.getOneUser(theId).then(function(data) {
vm.oneUserUpdate = data;
});
$scope.user = {};
$scope.submitForm = function(theId) {
$scope.user.idUser = theId;
dataService.updateUserPost($scope.user).then(function (data) {
vm.oneUserInfo = data;//response from http request
})
}
And in view:
<form name="userForm" ng-submit="submitForm(userDataCtr.oneUserUpdate.identities[0].user_id)">
<div class="form-group">
<label>Encryption Key :</label>
<input type="text" class="form-control" name="encryption" ng-model="user.encryption" >
</div>
<div class="form-group">
<label>Admin :</label>
<select class="form-control" name="admin" ng-model="user.admin">
<option>Select...</option>
<option value="true">True</option>
<option value="false">False</option>
</select>
</div>
<div class="form-group">
<label>Organization ID:</label>
<select class="form-control" name="organization" ng-model="user.organization">
<option>Select...</option>
<option ng-repeat="org in userDataCtr.allOrg" value="{{org.id_org}}">
{{org.name_org}}
</option>
</select>
</div>
<div class="form-group">
<label></label>
<div class="checkbox">
<label><input type="checkbox" value="1" name="role_cro" ng-model="user.role_cro">ROLE_CRO</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="1" name="role_client" ng-model="user.role_client">ROLE_CLIENT</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
And how, if is possible, to fill all data with user data, input field to have value, checkbox to be checked if they need, select option of organization to be selected, etc.
Thanks.
You have to update models. eg
dataService.getOneUser(theId).then(function(data) {
vm.user={};
vm.user.encryption = data.encryption;
vm.user.role_client = data.role;
});
On view
<div ng-controller="Mycontroller as my">
<div class="form-group">
<label>Encryption Key :</label>
<input type="text" class="form-control" name="encryption" ng-model="my.user.encryption" >
</div>
</div>
And so on... you have to use in your controller instance on your view.
Whenever you want to use data from a controller (or directive) inside a template, it has to be bound to the controller's $scope.
.controller('myFormController', function () {
dataService.allOrganization().then(function (data) {
// Populate our scope the required data
$scope.allOrg = data;
});
});
Now we can bind these variables to our form fields using ng-model.
<input type="text" name="firstName" ng-model="allOrg.firstName">
Not all form elements behave the same. You should take a look at the angular docs for more in depth examples of form binding.
Angular form documentation
How do I pass a value from my controller to <input>tag in my view? I got the data successfully but calling it from the html, it's not working? I don't get any errors, my syntax is just wrong, I tried several syntax base from angularjs documentation, I also tried using ng-value={{data.email}} and even placing double quotes between the value. What is the proper way to do this?
this is my html:
<label class="item item-input">
<input type="text" placeholder="Email" value={{data.email}} disabled>
</label>
this is my controller:
$http({
method: 'POST',
url: 'myservice',
data: encodedString,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data) {
for (i = 0; i < data.length; i++) {
if (data[i].QActivationCode === data[i].token) {
$scope.userData = data[i];
Acct.setAcctEmail(data[i].email);
}
}
});
You can use either ng-model or ng-value. You are using the wrong key in the view i.e. you should use userData.email instead of data.email in the HTML view. (The statement $scope.userData = data[i]; states that you are adding the key userData in the scope not the data):
Using ng-model
<label class="item item-input">
<input type="text" placeholder="Email" ng-model="userData.email" disabled>
</label>
Using value
<label class="item item-input">
<input type="text" placeholder="Email" value={{userData.email}} disabled>
</label>
Since the input field is disabled and we do not need to alter that input field so you should use the 2nd option.
In angular, ng-model is used to bind the scope values with the html elements. Or we can use {{}} expression if we have to pass the value to the input tags.
Small description about ng-model:
The ngModel directive binds an input , select , textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive. ngModel is responsible for: Binding the view into the model, which other directives such as input , textarea or select require.
Corrected html code is attached below:
1. <label class="item item-input">
<input type="text" placeholder="Email" ng-model="userData.email" disabled>
</label>
2. <label class="item item-input">
<input type="text" placeholder="Email" value={{userData.email}} disabled>
</label>
use ng-model
<label class="item item-input">
<input type="text" placeholder="Email" ng-value="data.email" disabled>
</label>
make sure that object data exist on the scope.
If I have a comment thread, and I want to reply to the comment thread I would have to
return $http.post('/reply/', {
user: username,
test: text ,
parent: parent
}).then(registerSuccessFn, registerErrorFn);
The html would be something in the line of
<form role="form" ng-submit="vm.reply()">
<div class="form-group">
<label for="user">User</label>
<input type="text" class="form-control" id="user" ng-model="vm.user" placeholder="ex. john" />
</div>
<div class="form-group">
<label for="text">text</label>
<input type="text" class="form-control" id="text" ng-model="vm.text" placeholder="text" />
</div>
<div class="form-group">
<label for="parent">parent</label>
<input type="text" class="form-control" id="parent" ng-model="vm.parent" placeholder="parent" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
But the thing is that parent, and the user should be dynamically generated, how do I generate the form dynamically so that each form in html correctly stores the parameter for parent and user such that it reflect the parent of the post and user comment on it?
You can bind the page the form is on (or alternatively just the form itself) to a controller e.g. MyFormController. Then when initially loading the page/form, make sure to load the parent and user information and store in your $scope.vm model.
NB - I'm of course assuming that you have the parent and user information in your database since you said they will be dynamically generated.
var loadData = function () {
$http.get(user_url).success(function (user) {
$scope.vm.user = user;
});
$http.get(parent_url).success(function (parent) {
$scope.vm.parent = parent;
});
};
loadData();
That's about all you'll need to do and the data will be binded to your form.
Cheers
I have an application which has code like this:
<div class="step-tab" id="tab_2" ng-class="{'step--active': step == 2}" ng-controller="eventCatCtrl">
<div ng-if="step == 2" ng-include="'include/step2.php'"></div>
</div>
Inside my step2.php file I have:
<div class="form-group">
<label for="catTitle">Category Title <span>*</span></label><input type="text" class="form-control" id="catTitle" ng-model="catTitle" placeholder="Please enter your Category Title">
</div>
<div class="form-group">
<label for="catDes">Category Description</label><textarea name="" class="form-control" id="catDes" placeholder="Enter a description here" ng-model="catDes" id="" cols="10" rows="6"></textarea>
</div>
<div class="form-group">
<input ng-click="catValues(catTitle, catDes, $event)" type="button" class="btn btn-default" value="Add Category">
</div>
I have triggered the function catValues and did:
eventApp.controller("eventCatCtrl", function($scope){
$scope.catValues = function(catTitle, catDes, $event){
$scope.catTitle = null;
$scope.catDes = null;
}
});
However the null doesn't work, also a lot of other stuff that I have in that controller and in the functions work perfectly well but only this null doesn't work.
If I include ng-controller="eventCatCtrl" inside the step2.php file then the null works.
I would just like to know why the null is not clearing values of catTitle and catDes and why is everything else apart from that working fine.
that's because ng-include create a separate scope, so in your id="tab_2" has eventCatCtrl, so the scope of eventCatCtrl controller is the parent scope for the scope which create by ng-include, So if u try to assign null it will check for the scope of eventCatCtrl it cannot see the scope of ng-include, thats why its not going to assign null for ng-include models.
Do achieve this in your case u can define the models in ng-include template in eventCatCtrl like below,
eventApp.controller("eventCatCtrl", function($scope){
$scope.includeData = {};
$scope.catValues = function(catTitle, catDes, $event){
$scope.includeData.catTitle = null; // modify this
$scope.includeData.catDes = null;
}
});
and change your includes like this
<input type="text" class="form-control" id="catTitle" ng-model="includeData.catTitle" placeholder="Please enter your Category Title">
<textarea name="" class="form-control" id="catDes" placeholder="Enter a description here" ng-model="includeData.catDes" id="" cols="10" rows="6"></textarea>
<form name="{{ formname }}" novalidate>
<input type="text" ng-model="first_name" required>
<input type="text" ng-model="last_name" required>
<input type="text" ng-model="email" required>
<span class="error" ng-show="formname.$invalid">Fill in required fields.</span>
<button type="submit"></button>
</form>
I'm trying to validate the form using Angular's built in validation but because the formname is set dynamically by text passed in from the scope I'm not sure how to call it. This attempt above doesn't work.
You can do it with a little help from the controller. Define another variable (f in the example below), watch formname and update f accordingly:
.controller("...", function($scope) {
$scope.first_name = "";
$scope.formname = "fff";
$scope.f = null;
$scope.$watch("formname",function(newval,oldval,scope) {
scope.f = scope[newval];
});
});
See fiddle: http://jsfiddle.net/T7vuD/