Develop Reference

JSON data is not updated when i removing the dynamic row value in angularjs

I implemented dynamic add and remove functionality in my project.
Add functionality working fine but when I am deleting the data based on the checkbox selection and trying to remove the dynamic row then Json is not updating.
<table class="table table-striped table-bordered">
<tbody>
<tr ng-repeat="personalDetail in Measurelist">
<td><input type="checkbox"
ng-model="personalDetail.selected" value="[$index]"/></td>
<td width="300">
<div class="form-group">
<div class="form-group"
ng-class="{'has-error':!theForm.measureCode.$valid && (!theForm.$pristine || theForm.$submitted),
'has-success':theForm.measureCode.$valid && (!theForm.$pristine || theForm.$submitted)}">
<select class="form-control" ng-options="item for item in a"
ng-model="formModel.AbcMeasure.measureCode[$index]"
name="measureCode" required="required"
ng-change="setRequired()">
<option value="">-- Select Code --</option>
</select>
</div>
</div>
</td>
<td width="300">
<div class="form-group">
<div class="form-group"
ng-class="{'has-error':!theForm.measureType.$valid && (!theForm.$pristine || theForm.$submitted),
'has-success':theForm.measureType.$valid && (!theForm.$pristine || theForm.$submitted)}">
<select class="form-control"
ng-options="item for item in b[formModel.abcMeasure.measureCode[$index]]"
ng-model="formModel.abcMeasure.measureType[$index]"
name="measureType" required="required">
<option value="">-- Select Type --</option>
</select>
</div>
</div>
</td>
<td><textarea class="form-control" ng-maxlength="1000"
ng-model="formModel.abcMeasure.measureDescription[$index]"
name="measureDescription" id="textArea"
ng-required="textRequired[$index]"></textarea></td>
<td><input type="button" ng-click="remove()" value="Remove" /></td>
</tr>
</tbody>
</table>
js file
$scope.formModel = {
internationalClient : 0,
isConfidential : 0,
isModificationLossRecog : 0,
idenComplianceForFinDifficulty : 1,
idenComplianceForConcession : 1,
idenComplianceForModificationOrRefin : 1,
abcMeasure : {
measureDescription : {
}
}
};
$scope.abcMeasurelist = [ {} ];
$scope.addNew = function(personalDetail) {
$scope.abcMeasurelist
.push({
/*
* 'mCode' : "", 'mType' : "",
* 'comments' : "",
*/
'measureCode' : $scope.formModel.abcMeasure.measureCode,
'measureType' : $scope.formModel.abcMeasure.measureType,
'measureDescription' : $scope.formModel.abcMeasure.measureDescription,
});
console.log("$scope.abcMeasurelist:: "+ angular.toJson(
$scope.abcMeasurelist, false));
};
$scope.remove = function() {
var newDataList = [];
$scope.selectedAll = false;
var data1;
angular
.forEach(
$scope.abcMeasurelist,
function(selected) {
if (!selected.selected) {
console
.log("selected :: "
+ selected);
newDataList
.push(selected);
}
});
$scope.abcMeasurelist = newDataList;
};
So I need below output.
If my JSON is like.
{"internationalClient":0,"isConfidential":0,"isModificationLossRecog":0,"idenComplianceForFinDifficulty":1,"idenComplianceForConcession":1,"idenComplianceForModificationOrRefin":1,
"abcMeasure":[
{"measureCode":"A-Reduction of the interest payable",
"measureType":"Permanent",
"measureDescription":"gfdgdf"},
{
"measureCode":"C-Reduction of the repayment amounts",
"measureType":"Temporary",
"measureDescription":"ghgfdh"
},
{
"measureCode":"D-Rescheduling repayment amounts",
"measureType":"Temporary",
"measureDescription":"hgfhgf"
}
]}
If I want to delete C one or two dynamic rows from the GUI, then my json will remove abcMeasure -->measureDescription -->measureCode-->measureType index value based on the selection from GUI.
{
{"internationalClient":0,"isConfidential":0,"isModificationLossRecog":0,"idenComplianceForFinDifficulty":1,"idenComplianceForConcession":1,"idenComplianceForModificationOrRefin":1,
"abcMeasure":[
{"measureCode":"A-Reduction of the interest payable",
"measureType":"Permanent",
"measureDescription":"gfdgdf"},
{
"measureCode":"D-Rescheduling repayment amounts",
"measureType":"Temporary",
"measureDescription":"hgfhgf"
}
]}
Please provide me solution on this.

Angularjs - how to update Dropdown depending on other Dropdown in Dynamic table?

var myAppRxCafe = angular.module('DescRxCafe', []);
myAppRxCafe.controller('RxCafeController', ['$scope', '$http', function($scope, $http) {
$scope.RxItemDetailArray = [];
$http.get("/URL ")
.then(function(response) {
var itemListArray = response.data.records;
for (var i = 0; i != response.data.records.length; i++) {
$scope.RxItemDetailArray.push({
'itemName': itemListArray[i].u_item_name,
'itemPrice': itemListArray[i].u_itemprice_decimal
});
console.log('Data from Server- ' + JSON.stringify(response.data.records));
}
});
$scope.RxCafeObj = [{
'rxCafeReqItem': '',
'rxCafeReqQty': 1,
'rxCafeReqTime': '',
'rxCafeReqOrderNotes': '',
'rxCafeReqPrice': 0,
'rxCafeReqTotalPrice': 0,
}];
$scope.addRow = function() {
$scope.rxCafeReqItem = '';
$scope.rxCafeReqQty = 1;
$scope.rxCafeReqTime = '';
$scope.rxCafeReqOrderNotes = '';
$scope.rxCafeReqPrice = 0;
$scope.rxCafeReqTotalPrice = 0;
$scope.RxCafeObj.push({
'rxCafeReqItem': $scope.rxCafeReqItem,
'rxCafeReqQty': $scope.rxCafeReqQty,
'rxCafeReqTime': $scope.rxCafeReqTime,
'rxCafeReqOrderNotes': $scope.rxCafeReqOrderNotes,
'rxCafeReqPrice': $scope.rxCafeReqPrice,
'rxCafeReqTotalPrice': $scope.rxCafeReqTotalPrice,
});
};
$scope.updatePrice = function(itemSelected) {
$scope.availablePrice = [];
angular.forEach($scope.RxItemDetailArray, function(value) {
if (value.itemName == itemSelected) {
$scope.availablePrice.push(value.itemPrice);
}
});
};
$scope.removeRow = function($index) {
if ($index != 0) {
$scope.RxCafeObj.splice($index, 1);
}
};
}]);
<div ng-app="DescRxCafe" ng-csp="no-unsafe-eval" id="divId2">
<div ng-controller="RxCafeController">
<table style="height: 28px;" width="430" class="table table-bordered" id="dataTable_RxCafeController">
<tbody>
<tr>
<th>Requested Item</th>
<th>Quantity</th>
<th>Time</th>
<th>Order Notes</th>
<th>Price</th>
<th>Total Price(Qty * price * 0.06)</th>
</tr>
<tr ng-repeat="company in RxCafeObj">
<td>
<select class="form-control input1" ng-model="rxItemName" name="rxCafeReqItem" id="selectedElectronicRec" ng-change="updatePrice(rxItemName)">
<option value='none_RxCafeController_input'>None</option>
<option ng-repeat="v in RxItemDetailArray | orderBy:'itemName':false" value="{{v.itemName}}">{{v.itemName}}</option>
</select>
</td>
<td>
<input type="number" class="form-control input1" id="RxCafeController_input" ng-model="rxQty" value="{{company.rxCafeReqQty}}" name="rxCafeReqQty" />
</td>
<td>
<input type="date" class="form-control input1" id="RxCafeController_input" name="rxCafeReqTime" />
</td>
<td>
<input type="text" class="form-control input1" id="RxCafeController_input" name="rxCafeReqOrderNotes" />
</td>
<td>
<select class="form-control input1" ng-model="rxPrice" name="rxCafeReqItemPrice" id="RxCafeController_input">
<option ng-repeat="v in availablePrice " value="{{v}}" ng-selected="{{v}}">{{v}}</option>
</select>
</td>
<td>
<input type="number" class="form-control input1" id="RxCafeController_input" ng-model="rxTotalPrice" value="{{rxPrice*rxQty*0.06}}" ng-disabled="true" name="rxCafeReqTotalPrice" />
</td>
<td>
<input type="button" value="Delete" ng-click="removeRow($index)" name="Delete" />
</td>
</tr>
</tbody>
</table>
<input type="submit" class="button" id="dataTable2_input" value="Add another line" ng-click="addRow('')" />
</div>
</div>

Can you check for loop used in your code,
$http.get("/URL ").then(function(response) {
//$scope.RxCafeLocationArray = response.data.records;
var itemListArray= response.data.records;
for(var i=0;i!=response.data.records.length;i++){
$scope.RxItemDetailArray.push({'itemName':itemListArray[i].u_item_name,'itemPrice':itemListArray[i].u_itemprice_decimal});
console.log('Data from Server- '+JSON.stringify(response.data.records));
}
condition in for loop seems confusing, it should be <=rather than !=

Can't print the Array in view using ng-repeat in angular JS

I have designed the dynamic table with the various type of the input field.We can add and delete the row as per the requirement.
Here is my HTML view code:
<body>
<div ng-app="appTable">
<div ng-controller="Allocation">
<button ng-click="add()"> Add </button>
<button ng-click="remove()">remove</button>
<table>
<th>
<td>Date</td>
<td>Project</td>
<td>Release</td>
<td>Feature</td>
<td>Module name</td>
<td>Hours spent</td>
<td>Comment</td>
</th>
<tr ng-repeat="data in dataList">
<td><input type="checkbox" ng-model="data.isDelete"/></td>
<td>
<input type="text"
datepicker
ng-model="data.date" />
</td>
<td><input type="text" ng-model="data.dept"/></td>
<td>
<select ng-model="data.release" ng-options="x for x in range">
</select>
</td>
<td>
<select ng-model="data.feature" ng-options="x for x in feature">
</select>
</td>
<td>
<input type = "text" ng-model = "data.modulename">
</td>
<td>
<select ng-model="data.hours" ng-options="x for x in hours">
</select>
</td>
<td>
<input type = "text" ng-model = "data.comment">
</td>
</tr>
</table>
<button ng-click="Submit()">Submit</button>
<tr ng-repeat="data in dataList">
<p>{{data.date}}</p>
<p>{{test}}</p>
</tr>
</div>
</div>
</body>
Here my angularJS script:
<script>
var app = angular.module("appTable", []);
app.controller("Allocation", function($scope) {
$scope.hours = ["1", "2", "3"];
$scope.range = ["1", "2", "3"];
$scope.feature = ["UT", "FSDS", "Coding/Devlopment", "QA"];
$scope.dataList = [{
date: '17/07/2016',
dept: 'OneCell',
release: '1',
feature: "UT",
modulename: "Redundancy",
hours: "1",
comment: "Add extra information"
}];
$scope.add = function() {
var data = {};
var size = $scope.dataList.length - 1;
data.date = $scope.dataList[size].date;
data.dept = $scope.dataList[size].dept;
data.release = $scope.dataList[size].release;
data.feature = $scope.dataList[size].feature;
data.modulename = $scope.dataList[size].modulename;
data.hours = $scope.dataList[size].hours;
data.comment = $scope.dataList[size].comment;
$scope.dataList.push(data);
};
$scope.Submit = function() {
$scope.test = "Submit is pressed...";
};
$scope.remove = function() {
var newDataList = [];
angular.forEach($scope.dataList, function(v) {
if (!v.isDelete) {
newDataList.push(v);
}
});
$scope.dataList = newDataList;
};
});
app.directive("datepicker", function () {
function link(scope, element, attrs, controller) {
// CALL THE "datepicker()" METHOD USING THE "element" OBJECT.
element.datepicker({
onSelect: function (dt) {
scope.$apply(function () {
// UPDATE THE VIEW VALUE WITH THE SELECTED DATE.
controller.$setViewValue(dt);
});
},
dateFormat: "dd/mm/yy" // SET THE FORMAT.
});
}
return {
require: 'ngModel',
link: link
};
});
</script>
I have taken the dataList array(list) to store the rows the of table.Every time when row will be added or deleted then respective element in the dataList array will be added and delete.
I have put the "submit" button in my view.When this button will be pressed then all the dataList element will be printed as shown here,
<button ng-click="Submit()">Submit</button>
<tr ng-repeat="data in dataList">
<p>{{data.date}}</p>
<p>{{test}}</p>
</tr>
But some how the dataList elements are not printed.However I am able to print the value of the test string.Please help.

Here you are using plain <tr> element for ng-repeat, this will not work, as it require proper structure of table.
E.g.:
<table>
<tr ng-repeat="data in dataList">
<td>
<p>{{data.date}}</p>
</td>
</tr>
</table>
P.S. : Your submit button is doing nothing. Just printing one statement. Above code of ng-repeat will work on each add and delete statement. i.e. it will print data simultaneously.

Duplicated form after click button add

Anybody help me, I have these working code currently:
HTML:
<body ng-controller="ExampleCtrl">
<label>Category:</label>
<select ng-model="product.category" ng-options="category as category.name for category in categories"></select>
</label><br/><br />
<table class="table" ng-repeat="attr in product.category.templateAttribute">
<thead>
<tr>
<th colspan="4">{{attr.attribute}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input value="{{attr.attribute}}" />
</td>
<td>
<input placeholder="name" ng-model="product.attributes[attr.attribute].name" />
</td>
<td>
<input placeholder="additional price" ng-model="product.attributes[attr.attribute].additionalPrice" />
</td>
<td rowspan="2">
<button type="button" ng-click="addItem(product.category.templateAttribute, attr)">
add
</button>
</td>
</tr>
<tr>
<td colspan="3">
<input type="file" class="form-control" ng-model="product.attributes[attr.attribute].file"/>
</td>
</tr>
</tbody>
</table>
JS
function ExampleCtrl($scope){
$scope.categories = [
{
name:'custom',
templateAttribute: [
{attribute: 'material'},
{attribute: 'soles'},
{attribute: 'size'}
]
}
];
$scope.products = [
{
name: 'custom',
category: {
name:'custom',
templateAttribute: [
{
type: "string",
attribute: "material"
},
{
type: "string",
attribute: "soles"
},
{
type: "string",
attribute: "size"
}
]
}
}
];
// add menu item
$scope.addItem = function(list, item){
list.push(angular.copy(item));
item = {};
};
// remove menu item
$scope.removeItem = function(list, index){
list.splice(index ,1);
};
}
angular
.module('app', [])
.controller("ExampleCtrl", ExampleCtrl)
For a demo :
Seet Demo
My problem is when I fill out one form above and click on the add button, it will display a new form, but that form always has the same value. How to fix my problem?

item should be defined as {} before pushing in list array.
If you do not want to send any model data through view then there is no point of sending attr argument to controller
Try this:
// Code goes here
function ExampleCtrl($scope) {
$scope.categories = [{
name: 'custom',
templateAttribute: [{
attribute: 'material'
}, {
attribute: 'soles'
}, {
attribute: 'size'
}]
}];
$scope.products = [{
name: 'custom',
category: {
name: 'custom',
templateAttribute: [{
type: "string",
attribute: "material"
}, {
type: "string",
attribute: "soles"
}, {
type: "string",
attribute: "size"
}]
}
}];
// add menu item
$scope.addItem = function(list, item) {
item = {};
list.push(angular.copy(item));
};
// remove menu item
$scope.removeItem = function(list, index) {
list.splice(index, 1);
};
}
angular
.module('app', [])
.controller("ExampleCtrl", ExampleCtrl)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ExampleCtrl">
<h3>How to fix this</h3>
<p>My problem is when I fill out one form above and click on the add button, it will display a new form, but that form always has the same value. Demo:</p>
<label>Category:
<select ng-model="product.category" ng-options="category as category.name for category in categories"></select>
</label>
<br/>
<br />
<table class="table" ng-repeat="attr in product.category.templateAttribute">
<thead>
<tr>
<th colspan="4">{{attr.attribute}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input value="{{attr.attribute}}" />
</td>
<td>
<input placeholder="name" ng-model="product.attributes[attr.attribute].name" />
</td>
<td>
<input placeholder="additional price" ng-model="product.attributes[attr.attribute].additionalPrice" />
</td>
<td rowspan="2">
<button type="button" ng-click="addItem(product.category.templateAttribute, attr)">
add
</button>
</td>
</tr>
<tr>
<td colspan="3">
<input type="file" class="form-control" ng-model="product.attributes[attr.attribute].file" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Codepen demo

Binding input selection to dropdown Angularjs

Hi I have following input
<input type="text" class="form-controlb" ng-model="item.name" id="name" placeholder="Enter Name" />
And following dropdown
<div class="col-sm-12" ng-model="query">
<select ng-model="item" class="form-control" ng-options="a.name for a in addemployees | filter:name | orderBy:'name'" value="{{a.name}}">
<option value="">[Select Employee..]</option>
</select>
</div>
Basically what I am trying to do is, when I enter name in the input box if dropdown has that name ints options to show it in dropdown.
I tried to do do filter by name and than orderby name but it doesnt show any on dropdown as selection.
Please let me know how to fix it.
Thanks

something like this may work:
<input type="text" ng-model="text" />
<select ng-model="selectedOption" ng-options="option.name for option in options">
</select>
$scope.options = [{
name: 'a',
value: 'value-a'
}, {
name: 'b',
value: 'value-b'
}];
$scope.selectedOption = $scope.options[0];
$scope.$watch('text', function(v) {
for (var i in $scope.options) {
var option = $scope.options[i];
if (option.name === v) {
$scope.selectedOption = option;
break;
}
}
});
http://plnkr.co/edit/Lj0p3wig9JfOM0UkpDrd

plank
I hope my example will be useful -)
<table>
<tr>
<td align="right">Search :</td>
<td><input ng-model="query[queryBy]" /></td>
</tr>
<tr>
<td align="right">Search By :</td>
<td>
<select ng-model="queryBy">
<option value="$"></option>
<option value="name">NAME</option>
<option value="company">COMPANY</option>
<option value="designation">DESIGNATION</option>
</select>
</td>
</tr>
</table>
ng-repeat:
<tr>
<tr ng-repeat="emp in employees | filter:query">
<td>{{emp.name}}</td>
<td>{{emp.company}}</td>
<td>{{emp.designation}}</td>
</tr>
JS:
angular.module('module3', [])
.controller('testCtrl3', function($scope){
$scope.query = {}
$scope.queryBy = '$'
$scope.items = [
{
"name" : "Ananchenko Juriy",
"company" : "GOOGLE. Ltd",
"designation" : "Creativ Director"
},
{
"name" : "Ananchenko",
"company" : "GOOGLE"
},
{
"name" : "Korman Juriy",
"company" : "GOOGLE. Ltd",
"designation" : "stager na ispitatelnom sroke"
}
];
$scope.orderProp="name";
});