php - Angular - 存储复选框值并显示它们

Question

假设您有 27 个复选框，我们称它们为“类别”。这些复选框在一个部分中，您可以选择多个，然后保存。

意思是:如果您保存表单，类别将添加到您在 MySQL 中的配置文件中。

我的问题是:

• 我应该如何命名模型，

• 发送表单后我应该如何存储值

我有一个解决方案，我保存了第 n 个类别，然后在加载时单击它们返回，但这不是最好的。

代码如下:

 $scope.getSelectedCats = function()  //Returning array: [1,4,5,6]
 {
   $return_array = [];
   $i = 0;

   if($scope.whoareu.develop){ $return_array[$i] = 1; $i++;}
   if($scope.whoareu.design){ $return_array[$i] = 2; $i++;}
   if($scope.whoareu.produce){ $return_array[$i] = 3; $i++;}
   if($scope.whoareu.repair){ $return_array[$i] = 4; $i++;}
   [...]

   return $return_array;

 }

HTML

  <p>
    <input ng-model="whoareu.develop" type="checkbox" value=1 id="WAY8" name="whoareu"  />
    <label for="WAY8">Develop</label>
  </p>
  <p>
    <input ng-model="whoareu.design" type="checkbox" value=2 id="WAY9" name="whoareu"  />
    <label for="WAY9">Design</label>
  </p>
  <p>
    <input ng-model="whoareu.produce" type="checkbox" value=3 id="WAY10" name="whoareu" />
    <label for="WAY10">Produce</label>
  </p>
  <p>
    <input ng-model="whoareu.repair" type="checkbox" value=4 id="WAY11" name="whoareu" />
    <label for="WAY11">Repair</label>
  </p>
  [...]

最后，一个非常丑陋的加载检查解决方案:

  <?php
  //$dbData = Data row from mysql, in object, by Wordpress
  echo "setTimeout(function(){";
  foreach(explode(',', $dbData->interested_in) as $val)
  {
    //echo "$('input:checkbox[name=whatareu]').filter('[value=$val]').click();";
    echo "$('input:checkbox[name=whatareu]').eq($val-1).click();";
  }
  echo "}, 1000);";
  ?>

Answer 1

我不知道我是否理解你的问题，请看我的代码片段。如果需要，您可以创建一些映射函数 setDefaultState(basedOn)，它在模型 checkboxs 中设置 checked。

如果问题是离开 Controller 后数据丢失，你应该使用像 Angular 的工厂这样的单例存储，并将选中的类别存储在那里。

angular.module('app', [])

.controller('FrameController', ['$injector',
  function($injector) {
    var vm = this;

    vm.checkboxs = [{
      id: 'WAY8',
      label: 'Develop',
      checked: true
    }, {
      id: 'WAY9',
      label: 'Design'
    }]

    angular.extend(vm, {
      save: save
    })

    function save() {
      // API call
      console.log('checked: ', vm.checkboxs.filter(function(c) {
        return c.checked
      }).map(function(c) {
        return {
          id: c.id
        }
      }));
    }

  }
]);

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="body">
  <div ng-controller="FrameController as vm">
    <ul>
      <li ng-repeat="checkbox in vm.checkboxs">
        <input ng-model="checkbox.checked" type="checkbox" id="{{checkbox.id}}" name="whoareu" />
        <label for="{{checkbox.id}}">{{checkbox.label}}</label>
      </li>
    </ul>
    <button ng-click="vm.save()">
      Save
    </button>
  </div>
</div>