var app = angular.module("myapp", []);
app.controller("ctrl", function($scope, $http, jsonFilter) {
$scope.loadcat = function() {
$http.get("cat_load.php")
.success(function(data, status, headers, config) {
$scope.CategoryArray = data;
});
}
$scope.GetProduct = function(categoryid, index) {
$http.post("product_load.php", {
'cat_id': categoryid
})
.success(function(data, status, headers, config) {
$scope.ProductsArray[index] = data;
});
}
$scope.GetSubCategory = function(categoryid, productname) {
$http.post("subcat_load.php", {
'cat_id': categoryid,
'productname': productname
})
.success(function(data, status, headers, config) {
$scope.subcatids = data;
});
}
/**********to add remove row start here **********/
$scope.remove_Row = function(name) {
var index = -1;
var comArr = eval($scope.data);
for (var i = 0; i < comArr.length; i++) {
if (comArr[i].name == name) {
index = i;
break;
}
}
if (index == -1) {
//alert( "Something gone wrong" );
}
$scope.data.splice(index, 1);
};
// dynamic row creation
$scope.data = [{}];
$scope.addFormField = function() {
//alert($scope.data);
$scope.data.push({});
}
/**********to add remove row End here **********/
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body class="no-skin" ng-app="myapp" ng-controller="ctrl">
<table ng-table="tableParams" class="display table table-striped table-bordered">
<thead>
<tr>
<th width="2%">Sr.No</th>
<th width="10%">Category Type <span class="error">*</span></th>
<th width="10%">Product <span class="error">*</span></th>
<th width="10%">Sub Category</th>
</tr>
</thead>
<tr ng-repeat="cap in data">
<td>{{$index+1}}</td>
<td data-title="'Category Type'" sortable="Category Type">
<select class="form-control" id="tags" type="text" ng-model="cap.categoryid" placeholder="Category Type" name="categoryid" required="" ng-init="loadcat()" ng-change="GetProduct(cap.categoryid,$index);GetSubCategory(cap.categoryid,cap.productname)">
<option value="">Select</option>
<option ng-repeat="cat in CategoryArray" value="{{cat.Category_Id}}">{{cat.Category_Name}}</option>
</select>
</td>
<td data-title="'Product'" sortable="Product">
<select class="form-control" type="text" name="productname" ng-model="cap.productname" placeholder="Enter Product Name" required ng-change="GetSubCategory(cap.categoryid,cap.productname)" />
<option value="">select</option>
<option ng-repeat="pro in ProductsArray[$index]" value="{{pro.ProductId}}">{{pro.ProductlName}}</option>
</select>
</td>
<td data-title="'Sub Category1'" sortable="Sub Category1">
<select class="form-control" type="text" name="subcategoryid" ng-model="cap.subcategoryid" id="subcategoryid">
<option value="">Select</option>
<option ng-repeat="subcatid in subcatids" value="{{subcatid.Sub_category_Id}}">{{subcatid.Sub_Category_Name}} </option>
</select>
</td>
<td>
<div class="pull-right">
<a ng-click="addFormField()" ng-if="data.length==$index+1" class='btn btn-default btn-xs' autofocus data-dismiss="modal"> <i class="glyphicon glyphicon-plus"></i></a>
<a ng-click="remove_Row($index)" class='btn btn-primary btn-xs' autofocus data-dismiss="modal"> <i class="glyphicon glyphicon-remove"></i></a>
</div>
</td>
</tr>
</table>
</body>
</html>
我正在使用CategoryArray ng-init="loadcat()"获取ng-change="GetProduct(cap.categoryid)"数据，ProductsArray获取ng-change="GetSubCategory(cap.categoryid,cap.productname)"中的动态数据。我也希望在subcatids的productname上获取ProductsArray
但问题是我正在添加一行，再次选择类别ProductsArray也会更改前一行。
问：我怎样才能在每次迭代的ng重复中为每个选择类别获得flutter run？