How to create dynamic scope variables in Angularjs? - html

Question

I want create the screen like this.
The select dropdowns and input fields should not effect on each other (right now if I select company, that is showing as selected in the next set, it should not like that). How can I implement this?
'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>

Answer 1

You can use $index for the purpose.
For example:
<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>
Use in ng-model:
data-ng-model = "targetDetails.company[$index]"
Hope this helps.