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>
Related
I'm practicing angularjs by creating a simple inventory app. I have a button to add a new product to the list of products, and I have an edit button for the existing products.
Both buttons bring up the same modal windows, and I have it set so that the title of the modal says "New Product" when I click on "Add New Product" button, and "Edit Product" when I click to edit an existing product.
The issue I'm having is when I click to add a new product the title displays correctly; however, as soon as I start typing the new code for the new product, the title changes automatically to "Edit Product".
Below is the code I'm using for this, and the entire code can be found here http://codepen.io/andresq820/pen/LWGKXW
The modal windows is not coming up in codepen.io; however, I'm writing logging "edit" to the console when the edit button is clicked, and "new" when the new product is clicked.
HTML CODE
<div class="modal fade" id="editItemModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{title(item.code)}}</h4>
</div>
<div class="modal-body">
<form name="myEditForm" ng-submit="editProduct(item)">
<div class="form-group">
<label for="code">Code:</label>
<input type="text" size="5" maxlength="5" class="form-control" name="code" id="code"
ng-model="item.code" ng-disabled="false">
</div>
<div class="form-group">
<label for="description">Description:</label>
<input type="text" class="form-control" id="description" ng-model="item.description" required>
<span ng-show="myEditForm.description.$touched && myEditForm.description.$invalid">The description is required.</span>
</div>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="number" min="0" max="99999" size="5" maxlength="5" class="form-control" name="amount" id="amount"
ng-model="item.amount" integer>
</div>
<div class="form-group">
<label for="radio">Type:</label>
<div class="radio">
<label><input type="radio" name="optradio" ng-model="item.type" value="in">In</label>
<label><input type="radio" name="optradio" ng-model="item.type" value="out">Out</label>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" ng-click="close()" value="Close" />
<input type="submit" class="btn btn-primary pull-right" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
ANGULARJS CODE
$scope.title = function(code){
console.log(code);
if (typeof code == 'undefined'){
console.log('new');
return 'New Product';
}
console.log('edit');
return 'Edit Product';
};
Change your function with below code. It will check if the code is already exist in your $scope.items or not. It will return as new if item not exited.
$scope.title = function(code){
var title = 'New Product';
angular.forEach($scope.items, function(value, key) {
var arr = Object.values(value);
if(arr.indexOf(code) !== -1 ) {
title = 'Edit Product';
}
});
console.log(title);
return title;
};
The input box for Code is bound to item.code value. As soon as you start typing anything in there, item.code is no longer undefined. And as per your condition in the method call for function, it returns Edit title when code is not undefined.
In your view you get your title through the title() function and what that function returns is based on the current code. As soon as you change anything in your model, Angular will detect a change and will go through ALL your two-way bindings and see if they need to be changed.
So in your case the following happens:
You enter a code
Angular detects a change
Angular will check all your bindings to see if they changed (ngBinding or the more common {{}})
The title() function gets called to see if it has changed, the title function has changed indeed, there is now a code so it will return the new title.
So how do you fix it? Easy!
instead of a two-way binding ({{}}) you can use a one-time binding ({{::}}). A one-time binding gets set once and then Angular 'forgets' about it, it simply won't care about any changes that happens to it any more.
In your case:
{{title(item.code)}}
to
{{::title(item.code)}}
Angular validation is working when there is no dot(.) in model in this following code...
<div class="form-group">
<label for="title">Post Title</label>
<input ng-model="new_title" class="form-control" name="new_title" type="text" required/>
<p class="error" ng-show="addForm.new_title.$touched && addForm.new_title.$invalid">This field is required</p>
</div>
But it is not working when I use ng-model="new.title" like in the following code...
<div class="form-group">
<label for="title">Post Title</label>
<input ng-model="new.title" class="form-control" name="new.title" type="text" required/>
<p class="error" ng-show="addForm.new_title.$touched && addForm.new.title.$invalid">This field is required</p>
</div>
Here is what I am using new in my controller
$scope.submit = function(){
var request = CRUD.create($scope.new);
request.success(function(response){
$scope.flash = response.status;
});
};
Help would be appreciated
You should not change your name along with your model.
<div class="form-group">
<label for="title">Post Title</label>
<input ng-model="new.title" class="form-control" name="new_title" type="text" required/>
<p class="error" ng-show="addForm.new_title.$touched && addForm.new_title.$invalid">This field is required</p>
</div>
This is how it should look like.
The validation doesn't check your model. It checks the form model that you bind the scope when using name attribute. So when checking for errors, you use the name attributes of the form and the inputs. You just need to change your name of the input from new.title to new_title.
You can't use dot (.) in variable name. you should use _ or camel-case to declare variable like:
new_title or newTitle
if want to use dot (.) notation then use like
var info = {
title: "your title"
}
then you can use like
<input ng-model="info.title" class="form-control" name="info.title" type="text" required/>
but you cant use new as a variable name. new is a reserved keyword
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" />
I've got a little problem. I want to set to dirty a single input, I mean, because when I give a value automatically it stays in pristine class, doesn't change, and doesn't save the new value.
If I edit it, it works and change the class. I want to cancel that pristine class.
If anyone know please let me know.
<form class="form-horizontal" ng-repeat="studiant in studiants" name="form" id="form">
<input type="hidden" name="id" value="{{studiant.studiant_id}}" class="form-control" disabled>
<div class="form-group">
<label for="school" class="col-md-2 control-label">School</label>
<div class="col-md-1">
<input type="text" id="school" name="school" class="form-control" ng-init="studiant.school=studiant.studiant_school" ng-model="studiant.school">
</div>
</div>
<div class="form-group">
<label for="name" class="col-md-2 control-label">Student's Name</label>
<div class="col-md-10">
<input type="text" id="name" name="name" class="form-control" ng-init="studiant.name=studiant.studiant_name" ng-model="studiant.name">
</div>
</div>
</form>
And the script:
document.getElementbyId('name').value = "anything";
Or, if I doing wrong and I have to change the value with ng-model or something, please help me.
http://plnkr.co/edit/bVoljJqiK3CLB2xqZ6Zm?p=preview
You can see a working example there.
Make sure you have the name attr set for the form and the input.
HTML Example:
<button id="dirty-button" ng-click="addText(); myForm.myText.$setDirty()">Make Dirty</button>
<hr>
<form name="myForm">
<input name="myText" id="myTextInput" type="text" ng-model="myText" required>
</form>
<br/>
<span ng-show="myForm.myText.$dirty">it's dirty now</span>
A simple function:
$scope.addText = function() {
$scope.myText = "now I'm dirty";
}
$scope.$on('$viewContentLoaded'){
$scope.form.fieldName.$dirty = true;
}
When your view is loaded then angular calls viewContentLoaded event is called. After that you can set the field dirty. And also if you want to call some method ,that should be executed after the content is loaded than you should call that method inside this $scope.$on('$viewContentLoaded'){..}
This should do the job
angular.element(document.querySelector('form')).scope().formname.fieldname.$setDirty()
<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/