I am using angularjs.
In my html I have 2 input boxes
edit = false;
<input type="text" value="" data-ng-if="edit" ng-model="name">
<input type="text" value="" data-ng-if="!edit" ng-model="singleAppDetails.name">
so here I wanted to show only one input box at a time based on some condition.
But i guess ng-if is not working.Basically if edit == true i want to show singleAppDetails.name and if edit == false then name
HTML DOM:
<div ng-app="myApp">
<div ng-controller="testController">
<input type="text" value="" data-ng-if="edit" ng-model="name">
<input type="text" value="" data-ng-if="!edit" ng-model="singleAppDetails.name">
</div>
</div>
Angularjs:
angular.module('myApp', [])
.controller("testController", function($scope){
$scope.singleAppDetails = {
"name" : "name if not editable"
}
$scope.name = "name if editable";
$scope.edit = false;
})
example: http://codepen.io/anon/pen/NqKQJO
You could try this:
<input type="text" value="" data-ng-if="edit" ng-model="(edit ? name : singleAppDetails.name)">
This way you only use an input to cover both cases.
<div ng-switch="edit">
<div ng-switch-when='false'>
<input type="text" value="" ng-model="singleAppDetails.name">
</div>
<div ng-switch-when='true'>
<input type="text" value="" ng-model="name">
</div>
</div>
Related
Here is my code, I am trying to validated my input but validations not working
<form class="form-horizontal m-t-n" role="form">
<div class="form-group">
<div class="col-sm-4">
<div class="input-group">
<h3>{{ 'Select Quantity (max 5)' | translate }}</h3>
<input type="number" name="quantity" ng-model="quantity" ng- change="setQuantity(quantity)" value="1"class="form-control" placeholder="{{ 'Quantity' | translate }}" ng-required integer >
</div>
</div>
</div>
</form><br>
Here is my setQuantity function:
$scope.setQuantity = function setQuantity( quantity ) {
$scope.quantity = quantity;
}
You can check the validity manually using ng-form and $valid property. Make sure to give name to every field inside ng-form and access the field in controller using frmName[fieldName].
var app = angular.module('mainApp', []);
app.controller('MyController', ['$scope', function($scope) {
$scope.setQuantity = function setQuantity(quantity) {
let isValid = $scope.myFrm['quantity'].$valid;
if (quantity && isValid) {
$scope.quantity = quantity;
}
console.log(quantity, isValid);
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="mainApp">
<div ng-controller="MyController">
<ng-form class="form-horizontal m-t-n" name="myFrm">
<div class="form-group">
<div class="col-sm-4">
<div class="input-group">
<h3>{{ 'Select Quantity (max 5)' }}</h3>
<input type="number" name="quantity" ng-model="quantity" ng-change="setQuantity(quantity)" value="1" class="form-control" placeholder="{{ 'Quantity' }}" max="5" min="1" ng-required> </div>
</div>
</div>
</ng-form>
</div>
</div>
Make sure that the input field is inside a form tag. Also, you can simply use required html attribute instead of ng-required. Check below code.
<form>
<input type="number" name="quantity" ng-model="quantity"
ng-change="setQuantity(quantity)" min="1" max="5" value="1"
class="form-control" placeholder="{{ 'Quantity' | translate }}"
required integer>
<br><br>
<input type="submit" value="Submit">
</form>
If you Must use angular-js then keep ng-required, make sure to put the code inside ng-app
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="">
<form>
<input type="number" name="quantity" ng-model="quantity"
ng-change="setQuantity(quantity)" min="1" max="5" value="1"
class="form-control" placeholder="{{ 'Quantity' }}"
ng-required integer>
<br><br>
<input type="submit" value="Submit">
</form>
</div>
I need to check which input element has modified in update form.
<form name="utilizationForm" role="form" novalidate>
<div class="row" data-ng-repeat="i in [1,2,3,4]">
<div class="col-md-3">
<div asterick class="form-group" ng-class="{'form-group has-success': !error['resource_type'] && (submitted), 'form-group has-error': (error['resource_type']) && (submitted)}">
<label for="resourceType">Resource Type</label>
<input type="hidden" name="id" id="id" class="form-control" ng-model="data['id' + i]" value="">
<select name="resourceType" id="resourceType" ng-model="data['resource_type' + i]" class="form-control" ng-required="true" >
<option ng-repeat="option in resourceTypeJson" value="{{option}}">{{option}}</option>
</select>
<span class="er-block" ng-show="utilizationForm.resourceType.$touched && utilizationForm.resourceType.$error.required">Please provide Resource type.</span>
<span ng-show="error.resource_type1" class="er-block">{{error.resource_type1}}</span>
</div>
</div>
<div class="col-md-3">
<label for="efforts">Efforts (in hours)</label>
<input type="hidden" name="id" id="id" class="form-control" ng-model="data['id' + i]" value="">
<input type="text" test-change name="efforts" id="efforts" class="form-control" ng-model="data['efforts' + i]" value="">
</div>
</div>
<div class="text-right" ng-class="{'col-md-6 mt25': showCompletion}">
<button class="btn btn-primary" ng-disabled="utilizationForm.$invalid" ng-click="addUtilizationReport()">{{buttonText}}</button>
</div>
</form>
Now when I click on update button I need to check which input element has modified in update form in controller. Please help.
If you put the input in a form with a name attribute and then give the input a name attribute, you can also access the input's $dirty property.
<div ng-controller="MyController">
<form name="myForm">
<input type="text" name="first" ng-model="firstName">
<input type="text" name="last" ng-model="lastName">
</form>
</div>
app.controller('MyController', function($scope) {
// Here you have access to the inputs' `$dirty` property
console.log($scope.myForm.first.$dirty);
console.log($scope.myForm.last.$dirty);
});
You can use $scope.myForm.$dirty to see if any fields have changed, and the $dirty property on each input's property on the form to see if that input has changed. You can even iterate over the myForm object (non-input-field objects have keys prefixed with a $):
angular.forEach($scope.myForm, function(value, key) {
if(key[0] == '$') return;
console.log(key, value.$dirty)
});
Here is simplest example of using $watch in controller:
var app = angular.module('myApp', []);
app.controller('appCtrl', function($scope, $location) {
$scope.$watch('abc', function(newVal,oldVal) {
if(oldVal != newVal){
alert("value changed!");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="appCtrl">
<input type="text" name="first" ng-model="abc">
</div>
My text editor model value is not binding which is of type textarea as well, and I have html formatted text in it. When I call my save method, this editor's model variable is null. I am not able to understand why this is happening as model with simple input type text is working fine, what could be the issue with the text editors model. Following is my code kindly have a look at this, may be I am doing something wrong.
<div class="col-md-12">
<div class="form-group">
<input type="text" ng-model="TemplateName" class="form-control" placeholder="Enter Template Name">
</div>
<div class="form-group">
<textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" id="templateDescription" ng-bind-html="TemplateDescription" placeholder="Enter Agreement Template ..." ></textarea>
</div>
</div>
And this is my controller code:
$scope.Template = {
Name: $scope.TemplateName,
Description: $scope.TemplateDescription,
};
var promisePost = templateService.post($scope.Template);
promisePost.then(function (pl) {
//success message
}, function (err) {
//error message
});
You should use ng-model and bind it directly to Template.Description
HTML
<div ng-app>
<div ng-controller="sampleCtrl">
<textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" id="templateDescription" ng-model="Template.Description" placeholder="Enter Agreement Template ..."></textarea>
{{Template.Description}}
</div>
</div>
Controller
function sampleCtrl($scope) {
$scope.Template = {
Description: ''
};
}
See this fiddle for your reference
yes use ng-model for binding
html as
div class="form-group">
<input type="text" ng-model="TemplateName" class="form-control" placeholder="Enter Template Name">
</div>
<div class="form-group">
<textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" id="templateDescription"
ng-bind-html="TemplateDescription"
ng-model='TemplateDescription' // add ng-model
placeholder="Enter Agreement Template ..."></textarea>
</div>
here is the plnkr link
Use ng-model instead of ng-bing-html
<div class="col-md-12">
<div class="form-group">
<input type="text" ng-model="TemplateName"
class="form-control" placeholder="Enter Template Name">
</div>
<div class="form-group">
<textarea cols="18" rows="40"
class="wysihtml5 wysihtml5-min form-control" id="templateDescription"
ng-model="TemplateDescription"
placeholder="Enter Agreement Template ..." ></textarea>
</div>
</div>
Check my pen http://codepen.io/keephacking/pen/kXVjOX?editors=1010
<div class="radio-inline" ng-repeat="customerOption in customerOptions">
<input type="radio" name="customer" ng-change="getCustomers(customerType)" ng-model="customerType" ng-value="customerOption.Key" ng-checked="customerOption.Checked" />{{customerOption.Value}}
</div>
This doesn't seem to do anything:
ng-attr-id="{{customerOption.Value}}"
or:
ng-attr-id="customerOption.Value"
or:
id="customerOption.Value"
These puts exactly that line in the html
That's a quick plunker to show use of ng-model for default radio
http://plnkr.co/edit/F3M2fzLaYYrIwQdtuwHT?p=preview
app.controller('MainCtrl', function($scope) {
$scope.gender = 'female';
});
<body ng-controller="MainCtrl">
<input type="radio" name="sex" value="male" ng-model="gender">Male
<br>
<input type="radio" name="sex" value="female" ng-model="gender">Female
</body>
I'd like to use ng-model on input that receive a value of an other input ...
My code doesn't work and I don't understand why, is that possible to set ng-model to an input with Angular values?
My code
var BottomApp = angular.module('BottomApp', []);
BottomApp.controller('SeoArticle', ['$scope', function($scope) {
$scope.seoTitle = document.getElementById('title').value;
$scope.createSeoUrl = function(string){
var string;
string = string.replace(/'+/g, '');
string = string.replace(/"+/g, '');
return string.replace(/\s+/g, '-');
};
}]);
<div ng-controller="SeoArticle">
<input type="text" id="title" name="article[title]" class="form-control" placeholder="title" ng-model="seoTitle">
<input type="text" name="article[seo_title]" value="{{seoTitle2}}">
<input type="text" name="article[seo_url]" value="{{seoUrl2}}">
<div class="ui-block-title"><h5>{{seoTitle}}</h5></div>
<input type="text" id="title" class="form-control" placeholder="title" value="{{seoTitle}}" ng-model="seoTitle2">
<input type="text" id="seo_url" class="form-control" placeholder="seo_url" value="{{createSeoUrl(seoTitle)}}" ng-model="seoUrl2">
<div class="panel">
<div class="seo-overview">
<p class="seo-overview-title">{{seoTitle}}</p>
<p class="seo-overview-url">{{createSeoUrl(seoTitle)}}</p>
</div>
</div>
</div>
:
Here's a working Plunker.
I have added the ng-app call to the body tag
<body ng-app="BottomApp">
and removed the string variable declaration from createSeoUrl.
Edit: I don't think you can do it within the DOM. You should use a watcher. See the updated Plunker.
$scope.$watch("seoTitle", function(newValue) {
$scope.seoTitle2 = newValue;
$scope.seoUrl2 = $scope.createSeoUrl(newValue);
})
<input type="text" id="title" class="form-control" placeholder="title" ng-model="seoTitle2">
<input type="text" id="seo_url" class="form-control" placeholder="seo_url" ng-model="seoUrl2">