我想使用angularjs獲取複選框列表中的所有選定的值

Question

**我需要獲取文件夾數組中選中的複選框值，因此我使用了ng模型。但它似乎不起作用。 **我需要在「列名：」數組。columnvalue」格式，但是這將是下一步，我必須從第一

 <div ng-repeat="filter in searchfilters|limitTo:4"> 
      <div class="row form-inline advanced-search-division"> 
       <span class="col-md-3 col-xl-3 col-lg-3 col-sm-12"> 
        <label for="PriorityCheckbox" class="task-content-text"> {{filter.ColumnName}}</label> 
       </span> 
       <span class="col-md-9 col-xl-9 col-lg-9 col-sm-12"> 
        <span ng-repeat="value in filter.ColumnValue" > 

         <span ng-if="value !== ' '" class="checkbox-inline"> 
          <label class="task-content-text" style="margin-right:50px"><input type="checkbox" ng-model="folder[value]" /> {{value}}</label> 

         </span> 
         <span ng-if="value == ' ' "> 
          <input type="text" /> 
         </span> 
        </span> 
       </span> 
      </div> 
     </div> 

angular.module("AMYApp").controller("advancedSearchController", function ($scope, $http) { 
 
    $scope.searchfilters = [{ "ColumnName": "AAAFramework", "ColumnValue":" ", "TableName": "AAAFrameworkMaster" }, 
 
     { "ColumnName": "TechnologyPlatform", "ColumnValue": ["SAP","Mobile","Web-Webforge","Web-Other","Quickbase","SharePoint","Other"], "TableName": "TechnologyPlatformMaster" }, 
 
     { "ColumnName": "CriticalBusinessProcess", "ColumnValue": ["Yes","No"], "TableName": "CriticalBusinessProcessMaster" }, 
 
     { "ColumnName": "ApplicationSize", "ColumnValue": ["Small", "Medium", "Large", "MEGA"], "TableName": "ApplicationSizeMaster" } 
 
     ] 
 
    $scope.folder = []; 
 
    }

  <div ng-repeat="filter in searchfilters|limitTo:4"> 
 
       <div class="row form-inline advanced-search-division"> 
 
        <span class="col-md-3 col-xl-3 col-lg-3 col-sm-12"> 
 
         <label for="PriorityCheckbox" class="task-content-text">{{filter.ColumnName}}</label> 
 
        </span> 
 
        <span class="col-md-9 col-xl-9 col-lg-9 col-sm-12"> 
 
         <span ng-repeat="value in filter.ColumnValue" > 
 

 
          <span ng-if="value !== ' '" class="checkbox-inline"> 
 
           <label class="task-content-text" style="margin-right:50px"><input type="checkbox" ng-model="folder[value]" /> {{value}}</label> 
 

 
          </span> 
 
          <span ng-if="value == ' ' "> 
 
           <input type="text" /> 
 
          </span> 
 
         </span> 
 
        </span> 
 
       </div> 
 
      </div>

Answer 1

複選框讓所有選擇值Sachila的回答是正確的，你需要將它存儲在一個對象中，或者使用一個對象將其存儲在這個對象的數組中，但我仍然不知道爲什麼這是angularjs中的原因，但是你經常會遇到這個問題angular試圖直接存儲在數組中，當它聲明爲這個範圍$ scope.array = [];

即使Sachila增快，在這裏我的解決方案：

<div ng-repeat="filter in searchfilters|limitTo:4"> 
    <div class="row form-inline advanced-search-division"> 
        <span class="col-md-3 col-xl-3 col-lg-3 col-sm-12"> 
         <label for="PriorityCheckbox" class="task-content-text">{{filter.ColumnName}}</label> 
        </span> 
    <span class="col-md-9 col-xl-9 col-lg-9 col-sm-12"> 
         <span ng-repeat="value in filter.ColumnValue" > 

          <span ng-if="value != ''" class="checkbox-inline"> 
           <label class="task-content-text" style="margin-right:50px"><input type="checkbox" ng-model="folder.values[value]" /> {{value}}</label> 

          </span> 
          <span ng-if="value == ' ' "> 
           <input type="text" /> 
          </span> 
         </span> 
        </span> 
    </div> 
</div> 

，並在控制器內：

$scope.searchfilters = [{ "ColumnName": "AAAFramework", "ColumnValue":" ", "TableName": "AAAFrameworkMaster" }, 
     { "ColumnName": "TechnologyPlatform", "ColumnValue": ["SAP","Mobile","Web-Webforge","Web-Other","Quickbase","SharePoint","Other"], "TableName": "TechnologyPlatformMaster" }, 
     { "ColumnName": "CriticalBusinessProcess", "ColumnValue": ["Yes","No"], "TableName": "CriticalBusinessProcessMaster" }, 
     { "ColumnName": "ApplicationSize", "ColumnValue": ["Small", "Medium", "Large", "MEGA"], "TableName": "ApplicationSizeMaster" } 
    ] 

    $scope.folder = {}; 

還我會被列名獨立的，所以值不互相覆蓋。想象一下，你會得到一個額外的列，其值也是「否」，如「關鍵業務流程」他們會覆蓋這些值，結果並不安全。

所以，你應該對其進行分類，在這裏看到：

angular.module("AMYApp",[]) 
 
.controller("advancedSearchController", function($scope, $http) { 
 
    $scope.searchfilters = [{ 
 
      "ColumnName": "AAAFramework", 
 
      "ColumnValue": " ", 
 
      "TableName": "AAAFrameworkMaster" 
 
     }, 
 
     { 
 
      "ColumnName": "TechnologyPlatform", 
 
      "ColumnValue": ["SAP", "Mobile", "Web-Webforge", "Web-Other", "Quickbase", "SharePoint", "Other"], 
 
      "TableName": "TechnologyPlatformMaster" 
 
     }, 
 
     { 
 
      "ColumnName": "CriticalBusinessProcess", 
 
      "ColumnValue": ["Yes", "No"], 
 
      "TableName": "CriticalBusinessProcessMaster" 
 
     }, 
 
     { 
 
      "ColumnName": "ApplicationSize", 
 
      "ColumnValue": ["Small", "Medium", "Large", "MEGA"], 
 
      "TableName": "ApplicationSizeMaster" 
 
     } 
 
    ] 
 
    $scope.folder = {}; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="AMYApp" ng-controller="advancedSearchController"> 
 
    <div ng-repeat="filter in searchfilters|limitTo:4"> 
 
     <div class="row form-inline advanced-search-division"> 
 
      <span class="col-md-3 col-xl-3 col-lg-3 col-sm-12"> 
 
       <label for="PriorityCheckbox" class="task-content-text">{{filter.ColumnName}}</label> 
 
      </span> 
 
      <span class="col-md-9 col-xl-9 col-lg-9 col-sm-12"> 
 
       <span ng-repeat="value in filter.ColumnValue" > 
 

 
        <span ng-if="value !== ' '" class="checkbox-inline"> 
 
         <label class="task-content-text" style="margin-right:50px"><input type="checkbox" ng-model="folder[filter.ColumnName][value]" /> {{value}}</label> 
 

 
        </span> 
 
        <span ng-if="value == ' ' "> 
 
         <input type="text" /> 
 
        </span> 
 
       </span> 
 
      </span> 
 
     </div> 
 
    </div> 
 
    {{folder}} 
 
</div>