如何在Angularjs中创建动态范围变量？
我想要像这样创建屏幕。
选择下拉列表和输入字段不应该相互影响（现在，如果我选择公司，在下一组中显示为选中，它应该不喜欢）。我该如何实现呢？
'use strict';
angular.module('newmonthlyplanning.controllers', [])
.controller('newmonthlyplanningCtrl', ['$scope','$window', '$state', 'serviceFactory', '$compile', '$interval','targetPlanningService',
function ($scope,$window,$state, serviceFactory, $compile,$interval,targetPlanningService) {
$scope.status = '200';
$scope.months = ['Jan','Feb','Mar','Apr','May','June','July','Aug','Sep','Oct','Nov','Dec'];
$scope.getAllSectors = function(){
targetPlanningService.getAllsectors().then(function (response) {
$scope.status = response.status;
console.log(response);
if (response.status === 200) {
$scope.sectors = response.data.sector_list;
}
else {
}
}, function (response) {
console.log(response);
if (response.status === 401) {
$state.go('login');
}
});
};
$scope.getcustomers = function(sector){
console.log("selected sector ",sector);
targetPlanningService.getAllCustomers(sector).then(function (response) {
$scope.status = response.status;
console.log(response);
if (response.status === 200) {
$scope.customers = response.data.customer_list;
}
else {
}
}, function (response) {
console.log(response);
if (response.status === 401) {
$state.go('login');
}
});
};
$scope.targetDetails = [];
$scope.getAllCompanies = function(){
targetPlanningService.getAllCompanies().then(function (response) {
$scope.status = response.status;
console.log("companies---> ",response);
if (response.status === 200) {
$scope.companies = response.data.companies;
$scope.targetDetails.push({'companies':$scope.companies,'sectors': $scope.sectors ,'customers': $scope.customers ,'targetss': $scope.targets});
}
else {
}
}, function (response) {
console.log(response);
if (response.status === 401) {
$state.go('login');
}
});
};
$scope.getAllproductIds = function(){
/* var details = {
'company' : $scope.targetDetails.company,
'sector' : $scope.targetDetails.sector
}
console.log("details--->",details);*/
console.log("$scope.targetDetails.company--->",$scope.targetDetails.company);
targetPlanningService.getAllproductIds($scope.targetDetails.company).then(function (response) {
$scope.status = response.status;
console.log("product_ids--->",response);
if (response.status === 200) {
$scope.productids = response.data.item_list;
}
else
{
}
}, function (response) {
console.log(response);
if (response.status === 401) {
$state.go('login');
}
});
};
$scope.targets = [{'pid': '','week1': '', 'week2': '','week3':'','week4':''}];
var i=1;
$scope.addNewChoice = function(id) {
$scope.targetDetails;
i++;
$scope.targets.push({'pid': '','week1': '', 'week2': '','week3':'','week4':''});
};
$scope.removeChoice = function(val) {
console.log("index------>",val);
$scope.targets.splice(val,1);
};
//$scope.targetDetails = [];
console.log("companies at targetDetails------>",$scope.companies);
var i =0;
$scope.addorder = function(){
var object = {};
object['targetss'] = $scope.targets;
// $scope.targetDetails.push({'companies':$scope.companies,'sectors': $scope.sectors ,'customers': '','targetss': $scope.targets});
$scope.targetDetails.push(object);
};
$scope.init = function () {
console.log("present state...",$state.current.name);
if($state.current.name==="monthly"){
$scope.getAllSectors();
// $scope.getnumberOfweeks();
$scope.getAllCompanies();
// $scope.getTargetDetails();
//$scope.getCommentDetails();
}
};
$scope.init();
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 0px" ng-repeat="details in targetDetails">
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th>Company</th>
<th>Sector</th>
<th>Customer</th>
</tr>
</thead>
<tbody>
<tr >
<td>
<div>
<select class="form-control" data-ng-model="targetDetails.company" ng-change="getAllproductIds()" style="border: 1px solid skyblue;">
<option value="">Select Company</option>
<option ng-repeat="company in details.companies track by $index" value="{{company}}" >{{company}}</option>
</select>
</div>
</td>
<td >
<div >
<select class="form-control" data-ng-model="targetDetails.sector" ng-change="getcustomers(targetDetails.sector)" style="border: 1px solid skyblue;">
<option value="">Select Sector</option>
<option ng-repeat=" sector in details.sectors track by $index" value="{{sector}}">{{sector}}</option>
</select>
</div>
</td>
<td>
<div >
<select class="form-control" data-ng-model="targetDetails.customer" style="border: 1px solid skyblue;">
<option value="Customer"> Customer</option>
<option ng-repeat=" customer in details.customers track by $index" value="{{customer}}">{{customer}}</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row" style="padding: 0px">
<table class="table table-bordered">
<thead>
<tr>
<th>Product Id</th>
<th >WEEK1</th>
<th >WEEK2</th>
<th >WEEK3</th>
<th >WEEK4</th>
<!-- <th>Total</th> -->
<!-- <th>Status</th> -->
<th >Action</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="target in details.targetss">
<td align="center" >
<select class="form-control" style="width: 120px;border: 1px solid skyblue;" data-ng-model="target.pid" ng-change="getUnitsofProduct(target.pid)">
<option value="">Select pid</option>
<option data-ng-repeat="pid in productids">{{pid}}</option>
</select>
</td>
<td align="center">
<input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week1">
</td>
<td align="center">
<input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week2">
</td>
<td align="center">
<input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week3">
</td>
<td align="center">
<input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week4">
</td>
<!-- <td align="center" >
{{ (target.week1 * 1) + (target.week2 * 1)+ (target.week3 * 1)+ (target.week4 *1)+ (target.week5 *1) }} {{target.uom}}
</td> -->
<!-- <td ng-if="target.status==''"></td>
<td ng-if="target.status==='Pending'"><span style="color: blue">{{target.status}}</span></td>
<td ng-if="target.status==='Rejected'"><span style="color: red">{{target.status}}</span></td>
<td ng-if="target.status==='Accepted'"><span style="color: green">{{target.status}}</span></td> -->
<td align="center">
<button class="add" style="background-color: #008CBA;" data-ng-show="$last" data-ng-click="addNewChoice($parent.$index)">+</button>
<button class="sub" data-ng-click="removeChoice($index)" style="background-color:#f44336;margin:0px;">-</button>
</td>
<td>{{$parent.$index}}</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 0px">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" >
<button data-ng-click="addorder()" style=" padding: 5px;margin: 0px">Add Order</button>
</div>
</div>
</div>
1 个答案:
答案 0 :(得分：0)
您可以使用$ index作为目的。 例如：
<select class="form-control" data-ng-model="targetDetails.company[$index]" ng-change="getAllproductIds()" style="border: 1px solid skyblue;">
<option value="">Select Company</option>
<option ng-repeat="company in details.companies track by $index" value="{{company}}" >{{company}}</option>
</select>
在ng-model中使用：
data-ng-model = "targetDetails.company[$index]"
希望这有帮助。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？