I am a beginner in angularjs and I read in the doc of angularjs that ng-class can be applied as string and array syntax. so I was trying to apply the ng-class for the below code
(1) Using String Syntax
<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type here">
(2) Using array Syntax
<p ng-class="[style1, style2]">Using Array Syntax</p>
<input ng-model="style1"
placeholder="Type here"><br>
<input ng-model="style2"
placeholder="Type here"><br>
I was trying to apply css like
.style{
color:red;
}
.style1{
color:blue;
}
.style2{
font-size:30px;
}
but failed. I do not know where I am doing mistake.Any help is appreciated.
you have added the ng-model="style" in input. So what ever you type in the input that will become the class for the 'p' tag because ng-class="style".
check this fiddle http://jsfiddle.net/devjit/wdtk370z/4/
And Type 'style', 'style1', 'style2' in the input field. you will understand what is happening.
<div ng-app>
<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type here"/>
<p ng-class="[style1, style2]">Using Array Syntax</p>
<input ng-model="style1"
placeholder="Type here"/><br/>
<input ng-model="style2"
placeholder="Type here"/><br/>
</div>
Related
I have used the following code segment where I wanted to change the value of the input box when it is loaded, but it didn't work
test.template.html
<div class="col-value">
<input type="text" class="input-box" autofocus="autofocus" ng-blur="saveData(value)" ng-class="getColor(value)" ng-model="value" >%
</div>
getColor function is written in the controller where the color is decided according to the value given.
Could soomeone help me to solve this issue ? Thanks inadvance
The above code is correctly work when the relevant css classes are set into the input box as follows.
<span class="color">
<div class="col-value">
<input type="text" class="input-box" autofocus="autofocus" ng-blur="saveData(value)" ng-class="getColor(value)" ng-model="value" >%
</div>
</span>
Here is my Code and so have many fields like this :
<input type="text" pInputText class="form-control" name="companyName" [(ngModel)]="company.Name" required #companyName="ngModel"
/>
<label>Company Name</label>
<p class="ui-message ui-messages-error ui-corner-all" *ngIf="(!companyName.valid && companyName.touched)">
Company Name is required
</p>
Instead of defining separate message for all mandatory/invalid fields, can't I use single message with place holder for field name? So whenever I want to change message, I can manage this with single line change.
e.g. "${field} is required, ${field} is not valid etc."
please give me a example if this can do
The first solution that crossed my mind was just wrap the error messages in a function:
var displayError = (field) => `${filed} is required`;
And on the HTML
<input type="text" pInputText class="form-control" name="companyName" [(ngModel)]="company.Name" required #companyName="ngModel"/>
<label>Company Name</label>
<p class="ui-message ui-messages-error ui-corner-all" *ngIf="(!companyName.valid && companyName.touched)">
{{ displayError('Company name') }}
</p>
<input type="text" ng-model="num1">
<input type="text" ng-model="num2">
I want to compare numbers entered in above fields and generate error message if num1 < num2 using ng-form. We can do with JS but i want to keep validation simple. Can we implement in HTML tag using ng-form
Try something like this:
<div ng-form="regForm">
<span ng-show="num1>=num2">Num1 cannot be greater than num2</span>
<input name="num1" type="text" ng-model="num1">
<input name="num2" type="text" ng-model="num2">
</div>
JsFiddle: https://jsfiddle.net/sktajbir/6fmvsaf0/25/
Hope this will help you. Thanks.
Being very new to Angular I have a kinda unusual request.
I have a bunch of input fields
<div class="blurb" ng:repeat="item in fieldData.postData">
<input type="text" class="form-control" ng-model="item.key" />
<input type="text" class="form-control" ng-model="item.operator" />
<input type="text" class="form-control" ng-model="item.value" />
</div>
The values of these fields inturn are bound to another field
<input name="finalVal" type="text" ng-model="fieldData.postData" />
All works fine and I get an object inside finalVal, but I want the object in string format. Is there a way to achieve it without any changes in my controller? The reason being finalVal is basically stored as a string in DB and I cannot modify the data type.
Appreciate the help
I am new to AngularJS and I have following problem:
I want to iterate over an array of 'attributes' with a bunch of keys for the values stored in the Object.
<div ng-repeat="key in attributes">
{{key}}: <input type="text" value={{Object.key}} name="{{key}}">
</div>
This code displays just the correct key of {{column}} but delivers no result for the value of {{Object.column}}.
The phrase {{Object.{{column}}}} dosn't work neither.
If I run the code, giving the Object a static key of (e.g. ID) everything works perfectly.
I could go for
<div>
id: <input type="text" value={{Object.id}} name="id">
name: <input type="text" value={{Object.name}} name="name">
value: <input type="text" value={{Object.value}} name="value">
and so on...
</div>
But this static form does not seem to be the perfect solution.
Can someone help me?
You should do something like this -
<div ng-repeat="key in attributes">
{{key}}: <input type="text" value={{ Object[key] }} name="{{ Object[key] }}">
</div>
Use {{Object[key]}}. Angular considers .key to be a constant not a variable.