如何在Angularjs中创建动态范围变量？

-1

Here I added image 如何在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; 
 
\t \t \t $scope.addNewChoice = function(id) { 
 
\t \t \t \t 
 
     $scope.targetDetails; 
 
        i++; 
 
        $scope.targets.push({'pid': '','week1': '', 'week2': '','week3':'','week4':''}); 
 
       
 
\t \t \t  
 
\t \t \t }; 
 

 
    \t \t \t $scope.removeChoice = function(val) { 
 

 
\t \t \t  console.log("index------>",val); 
 
       $scope.targets.splice(val,1); 
 

 
\t \t \t }; 
 
    //$scope.targetDetails = []; 
 
    
 
    console.log("companies at targetDetails------>",$scope.companies); 
 
\t \t \t 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); 
 
      
 
\t \t \t }; 
 

 
      $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"> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t <table class="table table-bordered"> 
 
\t \t \t \t \t  <thead> 
 
\t \t \t \t \t  <tr> 
 
\t \t \t \t \t   <th>Company</th> 
 
\t \t \t \t \t   <th>Sector</th> 
 
\t \t \t \t \t   <th>Customer</th> 
 
\t \t \t \t \t  </tr> 
 
\t \t \t \t \t  </thead> 
 
\t \t \t \t \t  <tbody> 
 
\t \t \t \t \t  <tr > 
 
\t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t   <div> 
 
\t \t \t \t \t \t \t \t \t <select class="form-control" data-ng-model="targetDetails.company" ng-change="getAllproductIds()" style="border: 1px solid skyblue;"> 
 
\t \t \t \t \t \t \t \t \t \t <option value="">Select Company</option> 
 
\t \t \t \t \t \t \t \t \t \t <option ng-repeat="company in details.companies track by $index" value="{{company}}" >{{company}}</option> 
 
\t \t \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t  </td> 
 
\t \t \t \t \t \t \t  
 
\t \t \t \t \t \t \t \t <td > 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t   <div > 
 
\t \t \t       <select class="form-control" data-ng-model="targetDetails.sector" ng-change="getcustomers(targetDetails.sector)" style="border: 1px solid skyblue;"> 
 
\t \t \t \t \t \t \t \t \t  <option value="">Select Sector</option> 
 
\t \t \t \t \t \t \t \t \t \t <option ng-repeat=" sector in details.sectors track by $index" value="{{sector}}">{{sector}}</option> 
 
\t \t \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t   <div > 
 
\t \t \t       <select class="form-control" data-ng-model="targetDetails.customer" style="border: 1px solid skyblue;"> 
 
\t \t  \t \t \t \t \t \t \t  <option value="Customer"> Customer</option> 
 
\t \t \t \t \t \t \t \t \t \t <option ng-repeat=" customer in details.customers track by $index" value="{{customer}}">{{customer}}</option> 
 
\t \t \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t </td> \t \t \t 
 
\t \t \t \t \t  </tr> 
 
\t \t \t \t \t  </tbody> 
 
\t \t \t \t \t </table> \t 
 
\t \t </div> 
 

 
\t \t \t <div class="row" style="padding: 0px"> 
 
\t \t 
 
\t \t <table class="table table-bordered"> 
 
\t \t  <thead> 
 
\t \t  <tr> 
 
\t \t   <th>Product Id</th> 
 
\t \t   <th >WEEK1</th> 
 
\t \t   <th >WEEK2</th> 
 
\t \t   <th >WEEK3</th> 
 
\t \t   <th >WEEK4</th> 
 
\t \t  <!-- <th>Total</th> --> 
 
\t \t  <!-- <th>Status</th> --> 
 
\t \t   <th >Action</th> 
 

 
\t \t  </tr> 
 
\t \t  </thead> 
 
\t \t  <tbody> 
 
\t \t  <tr data-ng-repeat="target in details.targetss"> 
 
\t \t \t \t \t \t \t <td align="center" > 
 
\t \t \t \t \t \t \t <select class="form-control" style="width: 120px;border: 1px solid skyblue;" data-ng-model="target.pid" ng-change="getUnitsofProduct(target.pid)"> 
 
\t \t \t \t \t \t \t \t <option value="">Select pid</option> 
 
\t \t \t \t \t \t \t \t <option data-ng-repeat="pid in productids">{{pid}}</option> 
 
\t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t 
 
    \t \t \t \t \t \t \t <td align="center"> 
 
           <input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week1"> 
 
\t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t <td align="center"> 
 
           <input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week2"> 
 
    \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t <td align="center"> 
 
           <input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week3"> 
 
\t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t <td align="center"> 
 
           <input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week4"> 
 
\t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t  
 
\t \t \t \t \t \t \t <!-- <td align="center" > 
 
\t \t \t \t \t \t \t {{ (target.week1 * 1) + (target.week2 * 1)+ (target.week3 * 1)+ (target.week4 *1)+ (target.week5 *1) }} {{target.uom}} \t 
 
\t \t \t \t \t \t \t </td> --> 
 

 
\t \t \t \t \t \t \t <!-- <td ng-if="target.status==''"></td> 
 
\t \t \t \t \t \t \t <td ng-if="target.status==='Pending'"><span style="color: blue">{{target.status}}</span></td> 
 
\t \t \t \t \t \t \t <td ng-if="target.status==='Rejected'"><span style="color: red">{{target.status}}</span></td> 
 
\t \t \t \t \t \t \t <td ng-if="target.status==='Accepted'"><span style="color: green">{{target.status}}</span></td> --> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <td align="center"> 
 
\t \t \t \t \t \t \t <button class="add" style="background-color: #008CBA;" data-ng-show="$last" data-ng-click="addNewChoice($parent.$index)">+</button> 
 
\t \t \t \t \t \t \t <button class="sub" data-ng-click="removeChoice($index)" style="background-color:#f44336;margin:0px;">-</button> 
 
\t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t <td>{{$parent.$index}}</td> 
 
\t \t  </tr> 
 
\t \t  </tbody> 
 
\t \t </table> 
 
      <br> 
 

 
\t \t \t    
 
\t \t \t </div> 
 
    </div> 
 
    <div class="row"> 
 
\t \t <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 0px"> 
 
\t \t <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" > 
 
\t \t <button data-ng-click="addorder()" style=" padding: 5px;margin: 0px">Add&nbsp;Order</button> 
 
\t \t </div> 
 
\t \t </div> 
 
    </div>

来源

2017-03-07 Bodapati Srinu

当您询问有关由您的代码引起的问题的问题时，如果您提供可用于重现该问题的代码，您将得到更好的答案。请参阅[如何创建一个最小，完整和可验证的示例。]（http://stackoverflow.com/help/mcve） – georgeawg

您可以使用$指数为宗旨。例如：

<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-模型：

data-ng-model = "targetDetails.company[$index]"

希望这有助于。

来源

2017-03-07 09:40:48

这里的产品ID也影响相同的方式，选择公司后，我会得到产品ID的列表，如果我在第一个选择产品ID时将其显示为选定的，并且客户也将基于选定的部门获得，在调用getcustomers API之前创建了json obect，因此我无法获得客户。这个怎么做。我没有任何想法。 –

请任何人给我建议 –

使用$ index（'targetDetails.company [$ index]'）将导致'undefined'，因为'targetDetails'是一个数组 – Mephiztopheles

如何在Angularjs中创建动态范围变量？

回答

相关问题