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";
});
Related
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.
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.
i am using angular ng-repeat to add the set of input values which can be used to give the input.
how i am adding dynamically is i am taking an object and pushing into the ng-repeat variable. In the html each key in the object has a input field
javascript
(function () {
'use strict';
angular.module('myFirstApp', [])
.controller('MyFirstController', function ($scope) {
var flowchart=this;
$scope.conditionslv = [];
flowchart.field1dropdown = [{"FieldName":"","DisplayName":"select"},{"FieldName":"se","DisplayName":"se"},{"qw":"","DisplayName":"qw"}]
flowchart.operatordropdown = [{"OperatorTypeId":'',"OperatorTypeName":"select","WFSubConditions":[]},{"OperatorTypeId":1,"OperatorTypeName":"Greater Than","WFSubConditions":[]}]
flowchart.addconditionrow = function () {
$scope.conditionslv.push({
expression1: '', operatortypeid: '', expressionvalue: "", expression2value: "", comments: ""
});
console.log(JSON.stringify($scope.conditionslv));
}
flowchart.cancelConditons = function () {
flowchart.diagramshow = true;
flowchart.conditions = false;
}
flowchart.saveconditions=function(){
}
});
})();
html
<table>
<th>Field-1</th>
<th>Operator</th>
<th>Field-2</th>
<th>Comments</th>
<tbody>
<tr ng-repeat="i in conditionslv">
<td>{{i}}</td>
<td>
<select ng-model="i.expression1" required>
<option ng-repeat="item in fc.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option>
</select>
</td>
<td>
<select ng-model="i.operatortypeid" ng-required="true" ng-options="item.OperatorTypeId as item.OperatorTypeName for item in fc.operatordropdown" ></select>
</td>
<td>
<input type="text" ng-model="i.expressionvalue" ng-disabled="i.expression2value!=''||i.operatortypeid>5" >/<select ng-model="i.expression2value" ng-disabled="i.expressionvalue!=''||i.operatortypeid>5" required>
<option ng-repeat="item in fc.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option>
</select>
</td>
<td>
<textarea rows="1" cols="40" ng-model="i.comments"></textarea><span ng-click="conditionslv.splice($index,1)"
ng-if="conditionslv.length>1"><span class="k-icon k-font-icon k-i-x"></span></span>
</td>
</tr>
</tbody>
</table>
most of the inputs that i am adding are the dropdowns.
the problem is if i select a dropdown value and then again selecting the select option then the key corresponding to the dropdown is getting removed from the object
how the key is getting removed?thanks in advance
This may helpful..
(function () {
'use strict';
angular.module('myFirstApp', [])
.controller('MyFirstController', function ($scope) {
var flowchart=this;
flowchart.conditionslv = [{expression1: '', operatortypeid: '', expressionvalue: "", expression2value: "", comments: ""
}];
flowchart.field1dropdown = [{"FieldName":"ff","DisplayName":"select"},{"FieldName":"se","DisplayName":"se"},{"qw":"","DisplayName":"qw"}]
flowchart.operatordropdown = [{"OperatorTypeId":'',"OperatorTypeName":"select","WFSubConditions":[]},{"OperatorTypeId":1,"OperatorTypeName":"Greater Than","WFSubConditions":[]}]
flowchart.addconditionrow = function (valid) {
if(valid){
flowchart.conditionslv.push({
expression1: '', operatortypeid: '', expressionvalue: "", expression2value: "", comments: ""
});
} console.log(valid);
}
flowchart.cancelConditons = function () {
flowchart.diagramshow = true;
flowchart.conditions = false;
}
flowchart.saveconditions=function(){
}
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myFirstApp" ng-controller="MyFirstController as ctrl">
<form name="addForm" novalidate>
<button ng-click="ctrl.addconditionrow(addForm.$valid)" ng-disabled="addForm.$invalid">Add row</button>
<table>
<th>Field-1</th>
<th>Operator</th>
<th>Field-2</th>
<th>Comments</th>
<tbody>
<tr ng-repeat="i in ctrl.conditionslv">
<td>{{i.expression1}}{{i.operatortypeid}}{{i.expressionvalue}}{{i.expression2value}}{{i.comments}}</td>
<td>
<select ng-model="i.expression1" name="expre" required>
<option ng-repeat="item in ctrl.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option>
</select>
</td>
<td>
<select ng-model="i.operatortypeid" ng-required="true" ng-options="item.OperatorTypeId as item.OperatorTypeName for item in ctrl.operatordropdown" ></select>
</td>
<td>
<input type="text" ng-model="i.expressionvalue" ng-disabled="i.expression2value!=''||i.operatortypeid>5" >/<select ng-model="i.expression2value" ng-disabled="" ng-required="i.expressionvalue!=''||i.operatortypeid>5 && i.expression2value==''">
<option ng-repeat="item in ctrl.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option>
</select>
</td>
<td>
<textarea style="width:100px" rows="1" cols="40" ng-model="i.comments" name="comment" required></textarea>
<span ng-click="ctrl.conditionslv.splice($index,1)" ng-if="ctrl.conditionslv.length>1">
<span class="k-icon k-font-icon k-i-x"></span></span>
</td>
</tr>
</tbody>
</table>
</form>
</body>
Working jsfiddle
HTML
<table ng-controller="MyFirstController as fc">
<thead>
<th>Field-1</th>
<th>Operator</th>
<th>Field-2</th>
<th>Comments</th>
</thead>
<tbody>
<tr ng-repeat="i in conditionslv">
<td>
<select ng-model="i.expression1" required>
<option ng-repeat="item in fc.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option>
</select>
</td>
<td>
<select ng-model="i.operatortypeid" ng-required="true" ng-options="item.OperatorTypeId as item.OperatorTypeName for item in fc.operatordropdown"></select>
</td>
<td>
<input type="text" ng-model="i.expressionvalue" ng-disabled="i.expression2value!=''||i.operatortypeid>5">/
<select ng-model="i.expression2value" ng-disabled="i.expressionvalue!=''||i.operatortypeid>5" required>
<option ng-repeat="item in fc.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option>
</select>
</td>
<td>
<textarea rows="1" cols="40" ng-model="i.comments"></textarea><span ng-click="conditionslv.splice($index,1)" ng-if="conditionslv.length>1"><span class="k-icon k-font-icon k-i-x"></span></span>
</td>
</tr>
</tbody>
</table>
Controller
angular.module('myFirstApp', [])
.controller('MyFirstController', function($scope) {
var flowchart = this;
$scope.conditionslv = [];
flowchart.field1dropdown = [{
"FieldName": "",
"DisplayName": "select"
}, {
"FieldName": "se",
"DisplayName": "se"
}, {
"qw": "",
"DisplayName": "qw"
}];
flowchart.operatordropdown = [{
"OperatorTypeId": '',
"OperatorTypeName": "select",
"WFSubConditions": []
}, {
"OperatorTypeId": 1,
"OperatorTypeName": "Greater Than",
"WFSubConditions": []
}];
flowchart.addconditionrow = function() {
$scope.conditionslv.push({
expression1: '',
operatortypeid: '',
expressionvalue: "",
expression2value: "",
comments: ""
});
console.log(JSON.stringify($scope.conditionslv));
}
flowchart.cancelConditons = function() {
flowchart.diagramshow = true;
flowchart.conditions = false;
}
flowchart.saveconditions = function() {
}
flowchart.addconditionrow();
});
Need some clarifications :
From where this flowchart.addconditionrow() is executing ?
As you are pushing the single object into $scope.conditionslv array then why are you using ng-repeat ?. you can directly assign object property into the ng-model.
DEMO
angular.module('myApp', [])
.controller('MainController', function($scope) {
var flowchart = this;
$scope.conditionslv = [];
flowchart.field1dropdown = [{
"FieldName": "",
"DisplayName": "select"
}, {
"FieldName": "se",
"DisplayName": "se"
}, {
"qw": "",
"DisplayName": "qw"
}]
flowchart.operatordropdown = [{
"OperatorTypeId": '',
"OperatorTypeName": "select",
"WFSubConditions": []
}, {
"OperatorTypeId": 1,
"OperatorTypeName": "Greater Than",
"WFSubConditions": []
}]
flowchart.addconditionrow = function() {
$scope.conditionslv.push({
expression1: '',
operatortypeid: '',
expressionvalue: "",
expression2value: "",
comments: ""
});
}
flowchart.addconditionrow();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainController as fc">
<table>
<th>Field-1</th>
<th>Operator</th>
<th>Field-2</th>
<th>Comments</th>
<tbody>
<tr ng-repeat="i in conditionslv">
<td>
<select ng-model="i.expression1" required>
<option ng-repeat="item in fc.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option>
</select>
</td>
<td>
<select ng-model="i.operatortypeid" ng-required="true" ng-options="item.OperatorTypeId as item.OperatorTypeName for item in fc.operatordropdown" ></select>
</td>
<td>
<input type="text" ng-model="i.expressionvalue" ng-disabled="i.expression2value!=''||i.operatortypeid>5" >/<select ng-model="i.expression2value" ng-disabled="i.expressionvalue!=''||i.operatortypeid>5" required>
<option ng-repeat="item in fc.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option>
</select>
</td>
<td>
<textarea rows="1" cols="40" ng-model="i.comments"></textarea><span ng-click="conditionslv.splice($index,1)"
ng-if="conditionslv.length>1"><span class="k-icon k-font-icon k-i-x"></span></span>
</td>
</tr>
</tbody>
</table>
<div>
I am trying to set two ng-repeat loops, one of which, the nested one, is a select/option drop down. I checked other similar posts, but still not sure how to define the ng-model in HTML to get/set the default value/option in the select box.
<table>
<tr ng-repeat="student in studentList">
<td>{{student.name}}</td>
<td>
<select ng-model="courseSelected">
<option ng-repeat="course in courseList" value="{{course.id}}">{{course.name}}</option>
</select>
</td>
</tr>
</table>
Both studentList and courseList come from the database tables, and the student table/object has a courseId column/reference. In other words, the default selected course and the changed course option (if this happens) would have the logic behind them : student.courseId = course.id
Any help is appreciated.
<select ng-model="student.courseId" ng-options="course.name as course.id for course in courseList">
This should get you what you're looking for. I assumed that a course has the name property. But you can alias the course with any property you like in the ng-options directive. More documentation can be found here.
I think you should use ng-options in tag like:
<select ng-model="courseSelected" ng-options= "course.id for course in courseList">
maybe you should read these documentation for more explanation :
https://docs.angularjs.org/api/ng/directive/ngOptions
https://docs.angularjs.org/api/ng/directive/select
var editer = angular.module('app', []);
function myCtrl($scope) {
$scope.studentList = [{
id: 1,
name: 'Jack'
}, {
id: 2,
name: 'Terry'
}, {
id: 3,
name: 'Rosa'
}, {
id: 4,
name: 'Holt'
}];
$scope.courseList = [{
id: 1,
name: 'Course1'
}, {
id: 2,
name: 'Course2'
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl" class="container">
<table>
<tr ng-repeat="student in studentList">
<td>{{student.name}}</td>
<td>
<select ng-model="student.courseSelected" ng-options="course as course.name for course in courseList">
</select>
</td>
<td>
{{student.courseSelected.name}}
</td>
</tr>
</table>
<label class="item item-input">
<span class="input-label">Select date</span>
</label>
<pre>{{dateOption}}</pre>
</div>
Following are my code please take a look
var app = angular.module('myApp', []);
app.controller('displayData', function($scope){
$scope.selected = {};
$scope.formData = {};
$scope.customproductoption = [
{
"id" : "1",
"producttype" : "Shoe",
"sizetype" : [
{ "size" : "15" },
{ "size" : "16" },
{ "size" : "17" }
]
},{
"id" : "2",
"producttype" : "Dress",
"sizetype" : [
{ "size" : "XS" },
{ "size" : "S" },
{ "size" : "L" }
]
}
];
});
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<title></title>
</head>
<body ng-controller="displayData">
<select ng-model="selected.producttype" ng-options="s.producttype for s in customproductoption">
<option value="">-- Custom Product Option --</option>
</select>
<table class="table">
<thead>
<tr>
<th>Index</th>
<th>Size</th>
<th>Price</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="s in selected.producttype.sizetype">
<td>{{$index+1}}</td>
<td><input type="text" ng-model="formData.customsize" ng-init="formData.customsize=s.size" id="productsize" disabled></td>
<td><input type="text" ng-model="formData.customproductprice" id="customprice" name="productprice"></td>
<td><input type="text" ng-model="formData.customproductqty" id="customqty" name="productqty"></td>
</tr>
</tbody>
</table>
</body>
</html>
In this code based on selected option, i show related result in related result users can fill product price and quantity, in ng-model used formData i can bind all filled value in one array but ng-model value display all duplicate value
var app = angular.module('myApp', []);
app.controller('displayData', function($scope){
$scope.selected = {};
$scope.formData = {};
$scope.customproductoption = [
{
"id" : "1",
"producttype" : "Shoe",
"sizetype" : [
{ "size" : "15" },
{ "size" : "16" },
{ "size" : "17" }
]
},{
"id" : "2",
"producttype" : "Dress",
"sizetype" : [
{ "size" : "XS" },
{ "size" : "S" },
{ "size" : "L" }
]
}
];
});
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<title></title>
</head>
<body ng-controller="displayData">
<select ng-model="selected.producttype" ng-options="s.producttype for s in customproductoption">
<option value="">-- Custom Product Option --</option>
</select>
<table class="table">
<thead>
<tr>
<th>Index</th>
<th>Size</th>
<th>Price</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="s in selected.producttype.sizetype">
<td>{{$index+1}}</td>
<td><input type="text" ng-model="formData.customsize[$index]" ng-init="formData.customsize[$index]=s.size" id="productsize" disabled></td>
<td><input type="text" ng-model="formData.customproductprice" id="customprice" name="productprice"></td>
<td><input type="text" ng-model="formData.customproductqty" id="customqty" name="productqty"></td>
</tr>
</tbody>
</table>
</body>
</html>
you'r replacing the formData.customsize value when repeating. so you have to assign different models