**我需要在文件夹数组中选择复选框值,所以我使用了ng-model。但似乎没有用。 **我需要"列名中的数组:" 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 = [];
}
&#13;
<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>
&#13;
答案 0 :(得分:0)
Sachila的回答是正确的。您需要将其存储在对象中或使用对象将其存储在此对象内的数组中。我仍然不知道为什么这是angularjs中的原因,但是你会经常在角度尝试直接存储在一个数组中时遇到这个问题,当它声明为范围时这样的$ 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>