从外部控制器设置角度复选框重复

Question

我正在尝试简化我的控制器。所以我尝试设置变量以从外部控制器填充我的复选框列表。有可能吗？

这是我当前的代码http://jsfiddle.net/ilmansg/Lx37kr3e/1/

查看 HTML

<div ng-controller="AdminEventsCtrl">
  <h1>Array 1</h1>
  <ul>
    <li ng-repeat="item in array1">
      <input type="checkbox" ng-model="formData.value1[item.value]" value="{{item.value}}" />
      {{item.text}}
    </li>
  </ul>

  <h1>Array 2</h1>
  <script>
    array2 = [{
    text: 'Option 1',
    value: 'opt1'
  }, {
    text: 'Option 2',
    value: 'opt2'
  }, {
    text: 'Option 3',
    value: 'opt3'
  }, {
    text: 'Option 4',
    value: 'opt4'
  }];
  </script>
  <ul>
    <li ng-repeat="item in array2">
      <input type="checkbox" ng-model="formData.value1[item.value]" value="{{item.value}}" />
      {{item.text}}
    </li>
  </ul>

  <pre>Array1= {{array1}}</pre>
  <pre>Array2= {{array2}}</pre>
</div>

脚本 JS

var myApp = angular.module('myApp', []);

function AdminEventsCtrl($scope) {
  $scope.formData = {};

  $scope.array1 = [{
    text: 'Option 1',
    value: 'opt1'
  }, {
    text: 'Option 2',
    value: 'opt2'
  }, {
    text: 'Option 3',
    value: 'opt3'
  }, {
    text: 'Option 4',
    value: 'opt4'
  }];
}

Answer 1

不，这是不可能的，因为 Angular 不知道将数组附加到哪个范围。这是您的控制器凌乱问题的简化解决方案：

有两个数组，每个属性一个对应text 和value。

function AdminEventsCtrl($scope) {
  $scope.formData = {};
  $scope.array1 = [];

  var t = ['Option 1', 'Option 2', 'Option 3'];
  var v = ['opt1', 'opt2', 'opt3'];

  for(i=0;i<t.length;i++){
      $scope.array1.shift({text:t[i],value:v[i]});
  }

}

这可能是更多的代码，但看起来不那么混乱。它还允许您轻松添加新值。

Answer 2

我最终创建了工厂来保存我所有的数组，然后在我的控制器中使用该工厂