ng-model value is undefind in the dynamically added objects to dom - angularjs

Here is my code
This is static code.
<label for="lbitemname">Name</label>
<input type="text" id="lb-item-name" ng-model="lb.itemname1" />
These are dynamic, i.e they are added to DOM when I click add button on my page.
<label for="lbitemname">Name</label>
<input type="text" id="lb-item-name" ng-model="lb.itemname2" />
<label for="lbitemname">Name</label>
<input type="text" id="lb-item-name" ng-model="lb.itemname3" />
My problem is when I pass these values to controller.
lb.itemname2 and lb.itemname3 are undefined.

Related

Input not binding to model

I have an input box and my model is undefined for somereason when I try to access it in controller.
Below is the input box
<input type="text" ng-if="primaryOperator == 'Age'"
ng-model="primaryValueData" placeholder="enter Value"
class="hideOutlineClass" />
when i try to access $scope.primaryValueData in controller it is undefined. I cannot use ng-show have to use ng-if. Any help is appreciated
Try like this,
<div ng-if="primaryOperator === 'Age'">
<input type="text"
ng-model="primaryValueData" placeholder="enter Value"
class="hideOutlineClass" />
</div>

SimpleTest Browser All Checkboxes Same Name

Using SimpleTest, how would I check the third checkbox if they all share the same name?
<input type='checkbox' class='style' name='same' value="First" />
<input type='checkbox' class='style' name='same' value="Second" />
<input type='checkbox' class='style' name='same' value="Third" />
<input type='checkbox' class='style' name='same' value="Forth" />
Alternatively, when I get() the URL using SimpleTest, can I somehow add ID's to the inputs?
I have figured it out. This toggled the correct box..
$browser->setField("same", array("Third"));

two ng-model with the same value on a form

I have a simple form with two text inputs like below:
<form>
// this is visible in mobile view
<input id="mobileView" type="email" required ng-model="myValue" />
// this is visible on desktop view
<input id="desktopView" type="email" required ng-model="myValue" />
</form>
my question is does doing so violate angular form validation? because both of the inputs are in DOM and in one view one of them have value and in other view it doesn't have any value. does this break angular's validation?
Your code is correct and use ng-if it handle the DOM elements.
<form>
// this is visible in mobile view
<input id="mobileView" type="email" ng-if="condition for mobile view" required ng-model="myValue" />
// this is visible on desktop view
<input id="desktopView" type="email" ng-if="condition for desktop view" required ng-model="myValue" />
</form>

ng-model convert object to string

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

How to receive invalid data from input fields in Angularjs

It seems that the ngModel does not return anything at all when it's invalid.
I want to play with the value when only 2 or three characters is inserted!
<input
type="tel"
class="fullinput"
ng-model="xxxxx"
ng-minlength="12"
ng-maxlength="15"
required
/>
Just add name attribute to your form and to input. Then you'll be able to access needed value via:
in template {{myForm.xxx.$viewValue}}
in controller $scope.myForm.xxx.$viewValue
<form name="myForm">
<input
type="tel"
class="fullinput"
ng-model="xxxxx"
name="xxx"
ng-minlength="12"
ng-maxlength="15"
required
/>
</form>

Resources