We Keep Coding

How to restrict ngModel changes effect to other inside ng-template in angular7?

This is my code
<ng-template #rowDetailsTmpl let-row="row">
<div class="row" style="padding: 10px 30px;">
<div class="col-sm-5 form-group">
<label> Add Operator </label>
<input type="string" id={{row.DeskId}} name={{row.DeskId}} (ngModelChange)="onChangeOperator($event)" class="form-control"
placeholder="Search Operator" [(ngModel)]="selectedOperatorEmail">
</div>
#ViewChild('rowDetailsTmpl', { static: true }) rowDetailsTmpl: TemplateRef<any>;
this._dataTableService.rowDetailsTemplate = this.rowDetailsTmpl;
In my code input text field using inside ng-template , i set id and name dynamically , but when i change value in textbox it automatically reflect to other input fields. so how to solve this problem in angular7.

in component define the model like array:
selectedOperatorEmail: Array<any> = [];
in html define ngModel define like this:
[(ngModel)]="selectedOperatorEmail[row.DeskId]"

how to unchecked check box generated by ng-repeat?

I have check boxes in my application. I put it inside directive. Now the problem is I want to unchecked any of checked boxes from controller. I am able to unchecked all checkboxes but not particular one. Is there any way to tell the directive to unchecked the checkbox by setting model value to false.
DIRECTIVE:
.directive('filterCheckbox', ['$compile', function ($compile) {
return {
link:function(scope,element,attrs){
var temp = '<div class="check-box pull-left">' +
'<span class="ft" data-ng-class="{\'active\': '+attrs.ngModel+' ,\'inactive\':'+!attrs.ngModel+'}"></span>' +
'</div>' +
'<input type="checkbox" data-ng-model="'+attrs.ngModel+'" class="hide" data-ng-click="getFilteredAttrs(this)">'
element.html($compile(temp)(scope));
scope.$on('clear-filter',function(){
scope[attrs.ngModel] = false;
});
scope.$on('selected-filter',function(event,args){
//console.log('scope data',args);
//console.log('scope ', scope[attrs.ngModel]);
});
}
}
HTML:
<div class="inner-filter-section col-xs-3">
<h5 class="nova-bold">Status</h5>
<div class="outer-filter-section">
<div class="filter-option" ng-repeat=" status in filterStatusItems">
<label data-filter-checkbox class="pull-left filter-checkbox" ng-model="active" data-ng-click="setFilterObj('status')"></label>
<span class="options">{{status}}</span>
</div>
</div>
</div>
JS:
$scope.filterStatusItems = ['Success','Pending','Failed','Running','Timeout','Flow Import','Shared','Credits'];

Here is a solution in plunker
I just didn't see the use of a directive here. If you have some other behavior to add feel free to correct me.
I simply init into the scope a collection that will hold the checkboxes references :
$scope.checkboxes = [];
On the input init i add an entry in the $scope.checkboxes collection
ng-init="checkboxes.push({status:status, value:false})"
I bind this value to the input. I use the $index to bind the right object to the input :
checkboxes[$index].value
Now the uncheck mechanics :
Here i only display the status with a property value as true
On click i just set the value as false
<button ng-click="checkbox.value = false" ng-repeat="checkbox in (checkboxes | filter:{value:true}) ">
{{checkbox.status}}<span ng-if="!$last">,</span>
</button>
And that's pretty much all.
Hope it helped. If that was a mistake from me removing the directive just let me know that i can adapt a bit what i've done to your needs.

use ng-checked and set the value like true or false or assign ng-model value
<input type="checkbox" ng-model="master"><br/>
<input id="checkSlave" type="checkbox" ng-checked="master">

Get the value of an element inside ng-repeat

Here is my html snippet:
<tr ng-repeat="row in rowCollection">
<td><h6 id="{{$index}}">{{row.inventory_serialno}}</h6></td>
</tr>
<div class="form-group">
<label for="inventory_serialno">SL No:</label>
<input class="form-control" value="//I need the value of h6 here//" id="inventory_serialno" placeholder="Enter serial number">
</div>
Goal:
Get the value of an element inside ng-repeat (In this case the 'h6' tag value of each row)
Use that corresponding value to autofill the value of respective text box input present in each row.
The input text box is out of the ng-repeat scope.
For some reason i cant access the value of the h6 tag if i do this (gives a value null)
document.getElementById("1").innerHTML; //or even text()
Weirdly i noticed the above JavaScript code runs fine on the browser console but not on my script (which means its something to do with the angular element generation time.. May be i'm accessing it before it even got generated).
Nonetheless can someone please shed some light on the solution. Thanks in advance.
******** Updated with controller code *****
app.controller('InventoryCtrl', function ($scope) {
var x = document.getElementById("1").innerHTML; // giving a null value
console.log(x);
$scope.rowCollection = [{
id: 100,
inventory_serialno: 'HW13FGL'
}, {
id: 101,
inventory_serialno: 'SM123GH'
}, {
id: 102,
inventory_serialno: 'LK90100'
}];
});

You could do it like this:
<input value="{{rowCollection[2].inventory_serialno}}" />
Example
However I would place the input inside the ng-repeat to keep it clean, and achieve the layout you like inside a big wrapper, something like this:
<div class="grid" ng-repeat="row in rowCollection">
<div class="col">
<h6 id="{{$index}}">{{row.inventory_serialno}}</h6>
<hr>
<div class="form-group">
<form>
<input value="{{row.inventory_serialno}}"/>
</form>
</div>
</div>
</div>
If you need an input for each item, use ng-repeat.

Angular, get dynamic value of textbox to controller

i fetch from json and set the value to my angular ionic app. my textbox holds the value. but im unable to get the textbox value to controller. this is how i have done it
controller.js
$http.post("http://www.fooget.com/mydetails.php).success(function(details){
$scope.mydetails= details;
});
and i set the value to my html page
<form>
<div ng-repeat="data in details|limitTo:1">
<p>{{data.f_name}}</p> <!--displays the value-->
<input type="text" ng-model="v.name" value="{{data.f_name}}"/> <!--empty values-->
<input type="text" ng-model="v.id" value="{{data.id}}"/> <!--empty values-->
<button ng-click="push(v)">
</form>
on form click i dont get the textbox values to my controller, im trying to get the vaules to the controller. it doesnt appear
$scope.push= function (v) {
var push_name = v.name; // empty values
var push_id = v.id; // empty values
}

Also in your HTML:
<div ng-repeat="data in details|limitTo:1">
It should be
<div ng-repeat="data in mydetails|limitTo:1">
as you have $scope.mydetails and not details
The real problem is in initializing the values for ng-model:
As you're just setting the value attribute in input text, it's not assigned to the ng-model. Use ng-init directive to set it in the view.
<input type="text" ng-model="v.name" ng-init="v.name=data.f_name"/>
<input type="text" ng-model="v.id" ng-init="v.name=data.id"/>
This will work for you.

Input field blurs when inline editing in ng-repeat

I am trying to do inline editing on a table of data (See the plunkr)
<table class="table table-bordered">
<tr ng-repeat="data in dataset" >
<td ng-repeat="(key, value) in data" >
<div class="key-block">
<strong >{{key}}</strong>
</div>
<div class="val-block" inline-edit="data[key]" on-save="updateTodo(value)" on-cancel="cancelEdit(value)">
<input type="text" on-enter="save()" on-esc="cancel()" ng-model="model" ng-show="editMode">
<button ng-click="cancel()" ng-show="editMode">cancel</button>
<button ng-click="save()" ng-show="editMode">save</button>
<span ng-mouseenter="showEdit = true" ng-mouseleave="showEdit = false">
<span ng-hide="editMode" ng-click="edit()">{{model}}</span>
<a ng-show="showEdit" ng-click="edit()">edit</a>
</span>
</div>
</td>
</tr>
I can see in many places that we have to use a . in ng-model inside ng-repeat to avoid the scope issue. As I dont know the key already I am doing like data[key] for the model.
The input field blurs after I enter a single character.

The behavior you described is normal. If you look closely you will see that both the input value and the directive are bound to the same object i.e data[key]. When you change the value of the text input the model get updated ultimately triggering a refresh of the directive and you are back to the "list" view.
One easy solution to fix this is to use an intermediate variable between the directive and the input value and update the model only when the save button is clicked. Something like that :
//Directive
scope.newValue = null;
scope.edit = function() {
scope.editMode = true;
scope.newValue = scope.model;
$timeout(function() {
elm.find('input')[0].focus();
}, 0, false);
};
//Template
<input type="text" on-enter="save()" on-esc="cancel()" ng-model="newValue" ng-show="editMode">
You can see a modified plunker here.