angularJS，壓平復選框列表到CSV

Question

我有一個服務，比如說this one返回

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

我需要把這個所有的複選框，用戶啓用，禁用它們，最後我養傷的檢查值CSV鍵。

說用戶檢查了「開發」和「設備」，所以我需要獲得「002,004」的值。

這裏是my codepen與已經檢查（002-發展論壇及003-環境）的一些值：

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(",") + "' !"); 
 
     }; 
 
    }]);

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

但是所有的代碼並未真正發揮作用。哪裏有問題？

Answer 1

你可以試試下面的代碼，如果你想相應的鍵被保存期基於Vivz答案勾畫

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

（感謝很多的努力），這裏是工作液

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); 
 
    }; 
 
    } 
 
]);

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