How to create dynamic scope variables in Angularjs?

Question

Here I added image

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&nbsp;Order</button>
		</div>
		</div>  
   </div>

When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. See How to create a Minimal, Complete, and Verifiable example. — georgeawg
– georgeawg, Commented Mar 7, 2017 at 8:04

AKSHAY JAIN · Accepted Answer · 2017-03-07 09:40:48Z

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.

answered Mar 7, 2017 at 9:40

AKSHAY JAIN

2461 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bodapati Srinu Over a year ago

here the product id's also affecting same way,after selecting company i will get list of product id's ,if i select product id in first set it showing as selected, and the customers also will get based on selected sector ,the json obect is created before calling getcustomers api ,so i am not able to get customers. how to do this . i am not getting any idea.

Bodapati Srinu Over a year ago

please any one give me suggestions

Xandrios93 Over a year ago

using the $index (targetDetails.company[$index]) will result in undefined, because targetDetails is an array

Collectives™ on Stack Overflow

How to create dynamic scope variables in Angularjs?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related