I want to set default value of e.name to "ALL" using ng-init
Here is my TEMPLATE code :
<tr ng-repeat="e in employees" ng-init="employees[0] = 'ALL'">
<td>{{ $index + 2}}</td>
<td>{{ e.name}}</td>
<button type="button" ng-click="select(employee)">
Select
</button>
</td>
</tr>
DIRECTIVE link
scope.employees = EmployeeService.query();
Here I want to set default value of e.name to ALL before generating dynamic data
I am getting dynamic data properly in employees and {{ e.name}} from directive
but here I want to show ALL in same <td> before getting dynamic data
If you're just trying to display ALL before data is retrieved, you could consider using an or operator.
<tr ng-repeat="e in employees">
<td>{{$index + 2}}</td>
<td>{{e.name || 'ALL'}}</td>
<button type="button" ng-click="select(employee)">
Select
</button>
</td>
</tr>
However, if you actually need ALL to be a value, I would strongly suggest setting it to the default value where ever you model employees.
Related
I'm trying to add more than one array input and a button that will create new inputs.
I have four arrays vm.work_place[], vmwork_year_start[], vm.work_yead_end[], vm.work_why_left[]. What I want is to create new input everytime I click on a button, and another button that will remove the input.
<button ng-click="vm.work_place.push(' ');vm.work_year_start.push(' ');vm.work_yead_end.push(' ');vm.work_why_left.push(' ');">Add row</button>
<tr ng-repeat="x in vm.work_place">
<td>
<input name="work_place[]" ng-model="vm.work_place[$index]"/>
</td>
<td>
<input name="work_place[]" ng-model="vm.work_year_start[$index]"/>
</td>
<td>
<input name="work_place[]" ng-model="vm.work_yead_end[$index]"/>
</td>
<td>
<input name="work_place[]" ng-model="vm.work_why_left[$index]"/>
</td>
<td>
<button ng-click="vm.work_place.splice(index, 1);vm.work_year_start.splice(index, 1);vm.work_yead_end.splice(index, 1);vm.work_why_left.splice(index, 1);">Remove row</button>
</td>
</tr>
But the problem is that the code above gives me a ngRepeat:dupes Error when I click on the add new row button.
How can I create more than One input at the same time, ie. to add an Item on all four arrays?
ngRepeat:dupes this error comes when you iterate in a array with duplicate values.So i guess you would be getting error while adding row second times. because already vm_worksapace has ' ' as data when first row is added and when you click again ' ' is added again so there is duplicate value now and ng-repeat will give you eror.
To make this work with duplicate value
replace <tr ng-repeat="x in vm.work_place" > with <tr ng-repeat="x in vm.work_place track by $index" >
I am trying to post an array object that constructs a table. I want to from the table to modify(add new data) the data and post it.
Code:
<tr ng-repeat="cus in postObj.custs">
<td>{{$index + 1}}</td>
<td><input type="checkbox" ng-model="postObj.custs[$index].principal"/></td>
<td>{{cus.Name}}</td>
<td>{{cus.Phone}}</td>
<td>{{cus.AddPre}}</td>
<td><input type="text" class="form-control" ng-model="postObj.custs[$index].relation"/></td>
<td>
<button ng-click="deleteCus(cus)">Delete</button>
</td>
In the above code the tags inside the is the field for new values.
But when I console.log() the object the new objects are never there. So what can be done with this?
I have to update the value of multiple Inputs using ng-repeat. i usually get the value with JQuery $(class/id).val() and get its value. but now i have no idea how to access the input values since i only have one id for each. (i have like 20 input in the table)
View:
<tr ng-repeat="i in list">
<td><input list="itemNames" class="item_name" ng-model="i.item_name" value="{{i.item_name}}" type="text"/></td>
<datalist id="itemNames">
<option ng-repeat="ii in list" class="idI" ng-model="ii.idI" data-item="{{ii.idI}}" value="{{ii.item_name}} {{ii.idI}}">
</datalist>
<td><input class="quantity" ng-model="i.quantity" value="{{i.quantity}}" type="number"/></td>
<td><input class="price" ng-model="i.price" value="{{i.price}}" type="number"/></td>
<tr>
<td ng-click="updateAll()">UPDATE</td>
</tr>
</tr>
I expect to store all values in an arrays, but what i got is only values of the first row.
JS:
$scope.updateAll=function(){
// getting vallues
var item_name=$(".item_name").val();
var quantity=$(".quantity").val();
var price=$(".price").val();
}
I think your list is a scope variable. So, in controller its defined as $scope.list. You need not to think about id as you are using angular code, angular framework will do it for you.
As you used the two way data binding with ng-model, so any change to the bind variable will be immediately visible to controller and html view.
The use of ng-model ensures the immediate update to the $scope.list variable.
For example, if you add any text for "item_name" in the control index 0 from html view, the variable $scope.list[0].item_name will be automatically updated, also the change in $scope.list[0].item_name = "Some name" in controller will be automatically reflected in the view.
So, your given code can be re-written as following:
<tr ng-repeat="i in list">
<td><input list="itemNames_{{$index}}" class="item_name" id="txt_name_{{$index}}" ng-model="selectedValue" ng-change = "getSelectedId(selectedValue, $index)" type="text"/></td>
<datalist id="itemNames_{{$index}}">
<option ng-repeat="ii in list" class="idI" ng-model="ii.idI" data-item="{{ii.idI}}" value="{{ii.item_name}} {{ii.idI}}">
</datalist>
<td><input class="quantity" ng-model="i.quantity" value="{{i.quantity}}" type="number"/></td>
<td><input class="price" ng-model="i.price" value="{{i.price}}" type="number"/></td>
<tr>
<td ng-click="updateAll()">UPDATE</td>
</tr>
The javascript method can be written as:
var getSelectedId = function(selectedValue, index) {
var val = document.getElementById('txt_name_' + index).value;
var text = $('#itemNames_' + index).find('option[value="' + val + '"]').attr('data-item');
alert(text);
}
i have a table with ng-repeat where it has a colunm with filter as follows:
<tbody>
<tr ng-repeat="objin listOfObj |filter: searchObj">
{{ (listAllElmt | filter:{idElt: obj.id})[0].nameElt || ''}}
</tr>
</tbody>
the search part is done with the following instruction:
<label >Elmt label</label>
<input type="text" ng-model="searchObj.id">
Here the user must write in the input the id in order that filter:searchObj return a result, however, it must write the name which is a logic way and not putting the id.
How can i fix this issue?
I used another variable where i created it in html as follows:
<label >Elmt label</label>
<input type="text" ng-model="searchObj.id">
<tbody>
<tr ng-repeat="obj in listOfObj |filter: searchObj">
{{objInterm = obj;
objInterm.id = (listAllElmt | filter:{idElt: obj.id})[0].nameElt || '';
;''}}
{{ objInterm.id}}
</tr>
</tbody>
I'm using AngularUI's ui-mask directive to mask phone numbers. We'd like to save both the masked and unmasked value to the database.
I see the docs have the option to use the model-view-value="true" to store the $viewValue as the model giving us the masked value.
However since we'd like both I'd prefer a way to leave this false and access the $viewValue on my own. I see in the demo however this is for a single input. It looks like it is bound to the name of the inputs.
My issue is this is a ng-repeat and so the names vary. I got it working for a single item (you can see in the first table it works).
The last <td> is where I'm trying to show the $viewValue. I'm also trying to pass it in to the setPhoneValue function but it is undefined there also.
Edit: Created a fiddle: https://jsfiddle.net/n35u7ncz/
<form name="phone_form" id="crm_phonegrid" ng-app="crm_phonegrid" ng-controller="phoneCtrl">
<table cellpadding="2">
<tr>
<td><input type="text" name="new_phone" placeholder="Number" ng-model="addNumber.phoneNumber" onfocus="onFocusUpdateMask()" ui-mask="{{mask}}" ui-mask-placeholder ui-mask-placeholder-char="_" /></td>
<td><select name="phoneTypeSelect" ng-model="addNumber.phoneType" ng-options="option.name for option in phoneTypeOptions track by option.Value"></select></td>
<td><input type="button" ng-click="addNumber()" value="Add" /></td>
<td>{{phone_form.new_phone.$viewValue}}</td>
<td>{{addNumber.phoneNumber}}</td>
</tr>
</table>
<table cellpadding="2">
<thead>
<tr>
<th>Phone Link</th><th>Phone Number</th><th>Phone Type</th><th>Primary Flag</th><th>Mask</th><th>View</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="number in numbers">
<td><a style="color:#1160B7;text-underline-position:below" href="" ng-click="openPhoneRecord(number)">{{ number.crm_phonenumber }}</a></td>
<td><input type="text" id="crm_phonegrid_number" name="phone_number_input" model-view-value="true" ng-model="number.crm_phonenumber" ng-change="setPhoneValue(number)" ui-mask="{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}" ui-mask-placeholder ui-mask-placeholder-char="_" /></td>
<td><select name="phoneTypeSelect" ng-model="number.crm_phonetypecode" ng-change="setValue(number)" ng-options="option.name for option in phoneTypeOptions track by option.Value"></select></td>
<td><input type="radio" name="primary" id="primaryRadio" ng-checked="number.crm_isprimary" ng-model="number.crm_isprimary" ng-change="setValue(number)" ng-value="number.crm_isprimary" ng-click="setFlag(number)" /></td>
<td>{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}</td>
<td>View: {{phone_form.phone_number_input.$viewValue}}</td>
</tr>
</tbody>
</table>
</form>
We got this working. The trick was to use the $index to generate a unique Id for the element and then pass that to the controller.
I've updated the fiddle here: https://jsfiddle.net/n35u7ncz/3/
The general idea is that the input field needs to be tagged and have an ng-change:
<input type="text" id="phone_input_id" name="phone_input_name_{{$index}}" ng-model="number.crm_phonenumber" ng-change="setValue(number, $index)" ui-mask="{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}" ui-mask-placeholder ui-mask-placeholder-char="_" />
And then:
$scope.setValue = function(item, index)
{
item.crm_phonenumbermasked = $scope.phone_form["phone_input_name_" + index].$viewValue;
}