Question

我使用checkbox从model创建了多个输入ng-repeat，当我选择其中一些时，我得到了这个：

var accounts = [{'AA764':true}, {'AA324': true}, {'AA234': false}, {'AA553': true}, {'AA7365': false}];

但我需要在控制器中操作以下结构来调用和REST API：

var accounts = ['AA764', 'AA324', 'AA553'];

只有那些被选中的checkboxe，我尝试使用javascript foreach函数，但我无法使其正常工作。是否有任何有角度的图书馆或可能有凉亭可以帮助我？

感谢。

Answer 1

试试这段代码，我在这里使用lodash库：

var accounts = [{'AA764':true}, {'AA324': true}, {'AA234': false}, {'AA553': true}, {'AA7365': false}];
_.compact(accounts.map(transform));

function transform(item) {
  var prop = Object.keys(item)[0];
  return item[prop] ? prop : false;
}

Answer 2

如果您不介意使用库，jQuery.map()适用于此：

var accounts = [{'AA764':true}, {'AA324': true}, {'AA234': false}, {'AA553': true}, {'AA7365': false}];
var trueAccounts = $.map(accounts, function(item) {
  var key = Object.keys(item)[0];
  if (item[key])
    return key;
  else
    return null;
});
console.log(trueAccounts);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

或者，要在直接JavaScript中执行此操作，您可以将Array.filter()与Array.map()结合使用：

var accounts = [{'AA764':true}, {'AA324': true}, {'AA234': false}, {'AA553': true}, {'AA7365': false}];
var trueAccounts = accounts.filter(function(item) {
  var key = Object.keys(item)[0];
  return item[key];
}).map(function(item) {
  return Object.keys(item)[0];
});
console.log(trueAccounts);

Answer 3

您可以使用名为Lodash的库。它是一个实用程序库，它提供了许多功能来简化这样的任务。虽然这可以使用纯JS来完成，但我将使用此库考虑其在其他场景中的可用性。

您可以使用：

＆＃13;

var accounts = [{'AA764':true},{ 'AA324': true},{ 'AA234': false},{ 'AA553': true}, {'AA7365': false}];
var a =_.filter(_.map(accounts, function(item){
  return _.findKey(item);
}),undefined);
console.log(a);

＆＃13;

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.5.1/lodash.min.js"></script>

＆＃13;

结果：

此函数迭代一个对象并创建一个只包含对象中的键的数组。有关函数的更多信息：

https://lodash.com/docs#findKey

https://lodash.com/docs#map

https://lodash.com/docs#filter

您可以从CDN（https://cdn.jsdelivr.net/lodash/4.5.1/lodash.min.js）中包含该库，也可以下载并将其用作普通脚本。 Lodash提供了大量有用的实用功能，使JS编程变得更加容易。你最好试一试。

Answer 4

如果你想去图书馆，非常实用，就在这里Check-list model

或以这种方式做到这一点！

＆＃13;

angular.module('app', [])
.controller('Ctrl', function($scope){
  $scope.accounts = {AA324: false, AA234: false, AA553: false, AA764: true };
  $scope.showBeforeSendingRestAPI = function(){
    var res = []; 
    for(var i in $scope.accounts){
      if($scope.accounts[i])
        res.push(i);
     } 
    return res;
  } 
  
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller="Ctrl">
  <label ng-repeat="(account, checked) in accounts">
      <input type="checkbox" ng-model="accounts[account]" />         {{account}} 
  </label>
  <p>Accounts: {{showBeforeSendingRestAPI()}}</p>
</div>

＆＃13;

Answer 5

我认为这可能会对您有所帮助：

var accounts = [{'AA764':true},{ 'AA324': true},{ 'AA234': false},{ 'AA553': true}, {'AA7365': false}];

// Get selected objects
function getSelected(accounts){

    var ans = [];

    // Looping through array
    for(var i = 0; i < accounts.length; i++){

        var item = accounts[i];

        // Looping over object dynamic property
        for(var prop in item){
            if(item.hasOwnProperty(prop)){

                // if property is true then add it to the answer array
                if(item[prop] === true){
                    // Add item to the answer array
                    ans.push(item);
                }
            }
        }            
    }

    return ans;
}

console.log(getSelected(accounts)); // Here you may see the answer

如上所示，这是循环遍历对象数组，然后循环遍历对象属性（只有一个）并检查该属性是否设置为true并将其添加到答案数组。

Answer 6

这是一个简单而快速的解决方案：

// Input values
var accounts = [{'AA764':true}, {'AA324': true}, {'AA234': false}, {'AA553': true}, {'AA7365': false}];

// Result
var accountsResult = [];

// Loop through the array items
for (var i = 0; i < accounts.length; i++) {
  // Loop through the object properties
  Object.keys(accounts[i]).forEach(function (key) {
    // Check if the value is true
    if (accounts[i][key]) { 
      // If it is true add to the resulting array
      accountsResult.push(Object.keys(accounts[i])[0]);
    }
  });
}

// Voilà, you have your result in a new array
console.log(accountsResult);

Answer 7

你也可以这样做。

<ul>
  <li ng-repeat="account in accounts">
    <input type="checkbox" ng-model="account.selected" value={{account.name}} />
  </li>
</ul>

function abc(){
$scope.accountsArray = [];
      angular.forEach($scope.accounts, function(account){
        if (!!account.selected) $scope.albumNameArray.push(account.name);
      })
}

Javascript变换数组从输入复选框

7 个答案: