Serge Serge - 1 year ago 53
AngularJS Question

angularJS, flatten checkboxes list to a CSV

I have a service, say this one that returns

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


I need to put this all in checkboxes, users enable-disable them and finally I recuperate the checked values as CSV keys.

Say user checked the "Development" and "Equipment", so I need to obtain in the "002,004" value.

Here is my codepen with some values already checked (002-Developement and 003-Environment):



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>





However all that code does not really work. Where is the problem?

Answer Source

You can try the below code if you want the corresponding keys to be saved on checking

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download