我正在尝试使用angularjs获取复选框列表中的所有选定值

Question

**i need to get selected checkbox values in folder array so i have used ng-model. but it seems to be not working. **i need the array in "columnname:"columnvalue" format. but that would be the next step, i have to get all selected values from checkboxes first

       <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's answer is right. you either need to store it in an object or use an object to store it in an array inside this object. I still don't know why this is the reason in angularjs, but you will often have this problem in angular trying to directly storing in an array when its declared to scope like this $scope.array = [];

Even when Sachila was faster, here me solution:

<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>

and inside the controller:

  $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 = {};

also i would seperate it by column name, so the values dont overwrite each other. Imagine you get an additional column where values are also Yes and No like for "Critical Business Process" They would overwrite these values and the results are not secure.

So you should categorize it, see here:

 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>