我试图使用angularjs

时间:2017-02-24 11:31:46

标签: javascript html angularjs angularjs-scope

**我需要在文件夹数组中选择复选框值,所以我使用了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>

&#13;
&#13;
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;
&#13;
&#13;

1 个答案:

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