Question

我有服务，说this one返回

{"001":"Communication","002":"Developement","003":"Environment","004":"Equipment"}

我需要将这些全部放在复选框中，用户启用 - 禁用它们，最后我将检查的值恢复为CSV键。

说用户检查了＆＃34;开发＆＃34;和＆＃34;设备＆＃34;，所以我需要在＆＃34; 002,004＆＃34;值。

以下my codepen已经检查了一些值（002-Developement和003-Environment）：

＆＃13;

angular.module('tagsApp', [])
    .controller('tagsController', ['$scope', '$http', function ($scope, $http) {
        // an initial value is present in the #Tags hidden element
        $scope.tags = $('#Tags').val();
        var tags = $scope.tags.split(",");
        // I need an obj['key']='key' array
        $scope.myTagsArray = {};
        tags.forEach(function (tag) { $scope.myTagsArray[tag] = tag; });

        // get all possible values
        $http.get("http://www.mocky.io/v2/597866a7130000d704c0fed3")
            .then(function (response) {
                $scope.allTags = response.data;
            });

        $scope.change = function (myTagsArray) {            
            console.log("myTagsArray: '" + Object.values($scope.myTagsArray).join(",") + "' !");
        };
    }]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="tagsApp">
  <label>Tags</label>
  <div ng-controller="tagsController">
    <input type="hidden" id="Tags" value="002,003"/>
    <div ng-cloak ng-repeat="(key, value) in allTags">
      <label for="tag_{{key}}">
        <input type="checkbox" 
               id="tag_{{key}}"
               ng-model="tagsArray['{{key}}']"
               ng-true-value="'{{key}}'"
               ng-false-value=""
               ng-change="change(tagsArray)" />
        {{value}}
      </label>
    </div>
  </div>
</div>

＆＃13;

然而，所有代码都没有真正起作用。问题在哪里？

Answer 1

如果您希望在检查

时保存相应的密钥，可以尝试以下代码

angular.module("tagsApp", []).controller("tagsController", [
  "$scope",
  "$http",
  function($scope, $http) {
    // get all possible values
    $scope.allTags = {
      "001": "Communication",
      "002": "Developement",
      "003": "Environment",
      "004": "Equipment"
    };
    $scope.hidval="002,003";
    $scope.checked = [];
    $scope.tags = [];
    $scope.keys = [];
    $scope.tags = $scope.hidval.split(",");
    $scope.tags.forEach(function(tag) {
      $scope.checked[tag] = true;
      $scope.keys.push(tag);
    });

    $scope.change = function(mykey) {
      var ind = $scope.keys.indexOf(mykey);
      if ($scope.checked[mykey]) {
        $scope.checked[mykey] = false;
        $scope.keys.splice(ind, 1);
      } else {
        $scope.checked[mykey] = true;
        $scope.keys.push(mykey);
      }
        var result=$scope.keys.join();
        console.log(result);           
        $scope.hidval=result;
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="tagsApp">
  <label>Tags</label>
  <div ng-controller="tagsController">
    <input type="hidden" id="Tags" ng-model="hidval"/>{{hidval}}
    <div ng-cloak ng-repeat="(key, value) in allTags">
      <label for="tag_{{key}}">
        <input type="checkbox" 
               id="tag_{{key}}"
               ng-checked="checked[key]"
               ng-click="change(key)"/>
        {{value}}
      </label>
    </div>
  </div>
</div>

Answer 2

基于Vivz的答案（非常感谢您的努力），这是工作解决方案

＆＃13;

angular.module("tagsApp", []).controller("tagsController", [
  "$scope",
  function($scope) {
    // get all possible values
    $scope.allTags = {
      "001": "Communication",
      "002": "Developement",
      "003": "Environment",
      "004": "Equipment"
    };
    
    $scope.selectedTags = $("#Tags").val().split(",");   
    $scope.tagsArray = {};
    // init all with "false"
    Object.keys($scope.allTags).forEach(function(tag) { $scope.tagsArray[tag] = ""; });
    // check pre-selected from hidden #Tags
    $scope.selectedTags.forEach(function(tag) { $scope.tagsArray[tag] = tag; });
    
    $scope.change = function(mykey) {
      var result = Object.values($scope.tagsArray)
                         .filter(function(o){return o;})
                         .join(); // remove the empty values in array          
      $("#Tags").val(result); // update the hidden #Tags

      console.log(result);
    };
  }
]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="tagsApp">
  <label>Tags</label>
  <div ng-controller="tagsController">
    <input type="hidden" id="Tags" value="002,003"/>
    <div ng-cloak ng-repeat="(key, value) in allTags">
      <label for="tag_{{key}}">
        <input type="checkbox" 
               id="tag_{{key}}"
               ng-model="tagsArray[key]"
               ng-true-value="{{key}}"
               ng-false-value=""
               ng-change="change(key)" />
        {{value}}
      </label>
    </div>
  </div>
</div>

＆＃13;

angularJS，展平复选框列表为CSV

2 个答案: