I have a condition where I need to display values depending on an if condition. Below is my template code.
Template:
<td>
<label>Review Title/Purpose*</label>
</td></br>
<div ng-if="title1 == true">
<td>
<input type="text" class="col-md-10" maxlength="256" ng-show="title1" ng-model="arform.revtitle"><required/>
</td></div>
<div ng-if="title1 != true">
<td><input type="text" class="col-md-10" maxlength="256" ng-show="!title1" ng-init="'{{reviewtit}}'" ng-model="arform.revtitle"><required/>
</td></div>
The value in ng-init="'{{reviewtit}}'" is the value I get from Views. Where as the value in ng-show="title1" is the value I get from controller.
I just wanted to know is it right to use ng-show in the different ways I mentioned?
Related
I am using the ng-repeat to create the input fields dynamically, everything seems to be working fine and the input fields are created but due to some reason when I enter some value into that created input field then due to two-way data binding the value is entered simultaneously in all the text fields that were created.
As per my knowledge, I am assigning the different ng-model to each of the created fields so I am not sure why the values are being copied. When I try to print the values which are assigned to the input field just above the field then I see the id is different wanted to know why all the fields are taking the same value and also how can I prevent it.
HTML Code:
<tr>
<td ng-repeat="extension in ExtensionList">
<!-- Here the value displayed are different -->
{{ formdata.extension.ExtensionVlaues }}
<input type="text" class="form-control" id="extension.ExtensionVlaues" ng-model="formdata.extension.ExtensionVlaues">
</td>
</tr>
Here is the screenshot from the front-end:
Here is the example of my ExtensionList: {"Field1":"","Field2":"","Field3":1,"ExtensionVlaues":2}
As per my knowledge, the given ng-model is different but still not working. Can anyone please help me with this? I tried few things like ng-model="formdata.extension[ExtensionVlaues]" but still no luck.
I tried to assign ng-model like this but it is not working:
ng-model="formdata.extension[ExtensionVlaues]"
Based on the below answer I tried 2 different things it but it's not working and getting the same issue. Please let me know how can I resolve this:
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata.extension.key">
</td>
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata.extension.ExtensionVlaues">
</td>
You are trying to use ExtensionList as an array. You need to use it as an object with ng-repeat:
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata[extension][key]">
</td>
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata[extension][ExtensionVlaues]">
</td>
Just incase anyone else also struck at this issue:
<span ng-repeat="(key, extension) in ExtensionList" class="form-inline">
<br/>
<span>
{{ extension.NameSpace + ":" + extension.LocalName }}
</span>
<input type="text" class="form-control" id="extension.ExtensionVlaues" ng-model="ExtensionList.extension[key].FreeText" ng-blur="ExtensionText(ExtensionList.extension[key].FreeText, extension.ExtensionVlaues)">
</span>
how to Checked value from $index base. suppose in textboxStart Index and TextboxEnd . when user enter Start index 5 and End Index 10 , checkbox automatically checked, from 5 To 10 Index. please help me
<tr ng-repeat="item in MyList">
<td>{{$index}}</td>
<td>
<label class="mdl-checkbox mdl-js-checkbox" for="checkbox33">
<input autocomplete="off" ng-model="item.checked"
type="checkbox" id="checkbox33"
class="mdl-checkbox__input" unchecked>
{{CheckItems()}}
</label>
<td>{{item.Name}}</td>
<td>{{item.PilgrimID}}</td>
<td>{{item.GroupName}}</td>
<td>{{item.PassportNo}}</td>
<td>{{item.Gender}}</td>
<td>{{item.SubAgentName}}</td>
Use the ng-change directive to specify an update function:
<div>Input Start
<input ng-model="inputStart" ng-change="updateSelections(inputStart,inputEnd)" />
</div>
<div>Input End
<input ng-model="inputEnd" ng-change="updateSelections(inputStart,inputEnd)" />
</div>
Then update the selections:
$scope.updateSelections = function(iStart, iEnd) {
$scope.MyList.forEach((x,index)=>item.checked = (iStart<=index && index<=iEnd));
};
just push the selected values in an array , selectedItemIndexes like ng-checked="selectedItemIndexes.includes($index)"
https://stackblitz.com/edit/angularjs-snavdn
you can do it by adding one property like ItemIndex in your ItemList model,
and by putting input box with display none you can get index value in ItemList and can do what you want from javascript side,
<td><input type="text" style="display:none;" ng-model="item.ItemIndex"
ng-value="$index"/>{{$index}}
</td>
I have a series of table rows with various inputs inside of an ng-repeat and I'm trying to use angular's built in form validation to handle required fields. Everything works well except for when I delete one of the items in the array that is backing the ng-repeat.
Here is how I've set up my validation
<td ng-class="{ 'has-error' : vm.testForm.itemName{{$index}}.$invalid }">
<input type="text"
name="itemName{{$index}}"
class="form-control"
ng-model="item.name"
required />
<div class="help-block"
ng-show="vm.testForm.itemName{{$index}}.$invalid"
ng-messages="vm.testForm['itemName'+$index].$error">
<span ng-message="required">Name is required</span>
</div>
</td>
Plunker showing my issue
https://plnkr.co/edit/Q1qyqlSG69EXR2lTrsHk
In the plunker, if you delete the first table row, you'll notice that while the last row is still invalid, the errors have become attached to the row above. Then as you fill in the last row to make it valid and then empty it again, the errors still show up on the wrong row. Deleting subsequent rows just moves the errors further from the actual invalid row until they don't appear on the table at all.
Is there another way I should be going about validating these inputs?
The problem is that you you don't usally use {{}} (interpolation) in built in angular directives. So change your code to:
<td ng-class="{ 'has-error' : vm.testForm['itemName' + $index].$invalid }">
<input type="text"
name="itemName{{$index}}"
class="form-control"
ng-model="item.name"
required />
<div class="help-block"
ng-show="vm.testForm['itemName' + $index].$invalid"
ng-messages="vm.testForm['itemName'+$index].$error">
<span ng-message="required">Name is required</span>
</div>
</td>
Change:
vm.testForm.itemName{{$index}}.$invalid
To:
vm.testForm['itemName' + $index].$invalid
Made a plunker to verify:
https://plnkr.co/edit/vuQiH4D8qUY9jVoThnCy?p=preview
I have an Angular form where ng-repeat is used to create several TDs and each TD element holds a textbox whose value I want to modify using a function call with parameter. I hold values in an array and want to pick a value from there and put in textbox element.
<div ng-controller="MyController" ng-form id="myForm" name="myForm">
<table>
<tr>
<td ng-repeat="myObject in arrayOfObjects">
<input type="text" ng-???="{{ myFunctonCall(myObject.Property) }}" />
</td>
</tr>
</table>
</div>
Is there a standard ng directive or it can be achieved using formatters, parsers?
You can use ng-init to initialize a scope value inside each child scope of ng-repeat. Those values won't be shared with your parent controller, where arrayOfObjects is defined.
https://docs.angularjs.org/api/ng/directive/ngInit
(as said in the doc, do not use too much ngInit)
<div ng-controller="MyController" ng-form id="myForm" name="myForm">
<table>
<tr>
<td ng-repeat="object in arrayOfObjects">
<input type="text"
ng-init="value = myFunctionCall(object.Property);"
ng-model="value" />
</td>
</tr>
</table>
</div>
as #Deblaton Jean-Philippe said you can use ng-model to read the data
<input type="text" ng-model="myinitialvalue" />
then process it in the controller the way you want:
$scope.$watch('myinitialvalue' function(newval, oldval){
//newval is equal to value of myinitialvalue
//here we modify it and assign to myvar, here for example we just add 'abc' to it
$scope.myvar = newval + 'abc';
});
and angular template syntax {{myvar}} to show it in textarea or in some other place if the page:
<textarea>{{myvar}}</textarea>
How can i access the dynamic value generated of "name" property in model. Following is the code:
<tbody ng-repeat="que in backgroundInfo.questions">
<tr>
<td>{{que.id}} {{que.text}}</td>
<td>
<input type="radio" name="{{que.id}}" value="Yes" ng-model="backgroundInfo.questions.answer"/>Yes
<input type="radio" name="queid" value="No" ng-model="backgroundInfo.questions.answer"/>No
<textarea name="comment{{que.id}}" ng-model="backgroundInfo.questions.comment[que.id]" rows="2"
cols="45"/>
</td>
</tr>
</tbody>
You are so close
name="{{comment[que.id]}}"
Is this already solved? Because I think if want to have a name like name="comment[1]", the code should be like:
<textarea name="comment[{{que.id}}]" ...
you can remove the ng-model cause I think, it will now work.
Furthermore, you can access the value of your textarea using
angular.element(<name>)
in your controller.