如何将AngularJS范围对象转换为简单的JS数组？

如何将AngularJS范围对象转换为简单的JS数组？如何将AngularJS范围对象转换为简单的JS数组？

该函数检查是否有任何复选框被选中并将相应的值添加到对象。现在我想将对象值传递给一个数组，并在按下按钮后提醒它。但结果是不确定的，为什么？

var formApp = angular.module('formApp', []) 
 

 
    .controller('formController', function($scope) { 
 

 
     // we will store our form data in this object 
 
     $scope.formData = {}; 
 
     
 

 
    }); 
 

 
var array = Object.keys(formData).map(function(k) { return obj[k] }); 
 

 
function test(){ 
 

 
alert(array); 
 
}

<-- index.html --> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
    <!-- CSS --> 
 
    <!-- load up bootstrap and add some spacing --> 
 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 
    <style> 
 
     body   { padding-top:50px; } 
 
     form   { margin-bottom:50px; } 
 
    </style> 
 

 
    <!-- JS --> 
 
    <!-- load up angular and our custom script --> 
 
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<!-- apply our angular app and controller --> 
 
<body ng-app="formApp" ng-controller="formController"> 
 
<div class="col-xs-12 col-sm-10 col-sm-offset-1"> 
 

 
    <h2>Angular Checkboxes </h2> 
 

 
    
 
... 
 

 
    <!-- MULTIPLE CHECKBOXES --> 
 
    <label>Favorite Colors</label> 
 
    <div class="form-group"> 
 
     <label class="checkbox-inline"> 
 
      <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red"> Red 
 
     </label><br> 
 
     <label class="checkbox-inline"> 
 
      <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue 
 
     </label> <br> 
 
     <label class="checkbox-inline"> 
 
      <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green 
 
     </label> 
 
    </div> 
 

 
... 
 
    
 
    <!-- SHOW OFF OUR FORMDATA OBJECT --> 
 
    <h2>formData_object_is_not_empty-test</h2> 
 
    <pre> 
 
     {{formData}} 
 
    </pre> 
 
    <button onclick="test()">Click me</button> 
 
</div> 
 
</body> 
 
</html>

来源

2016-07-11 Rumata

'formData'不能被控制器构造函数的控制访问，所以当你创建一个数组时你已经访问了undefined。第二件事是'obj'也是未定义的。你也应该在那里使用'formData'。但是，这不是一个实验，这不是Angular应用程序应该具有的代码...在Angular应用程序中没有公开*可访问的代码。一般。 –

创建一个函数，调用该复选框的ng-click，从该$ scope变量获取值给js对象。简单。 –

试试这个：

var formApp = angular.module('formApp', []) 

.controller('formController', function($scope) { 

    // we will store our form data in this object 
    $scope.formData = {}; 
    var array = Object.keys($scope.formData).map(function(k) { return obj[k] }); 
    // wait for the formData to change and then alert 
    setTimeout(function() { 
     alert(array); 
    }, 2000); 


});

角度是，你是不是允许访问控制器之外的范围变量的方式进行。

如果你想有数组作为调试信息，请使用浏览器插件像AngularJS Batarang或使用console.log(array)代替alert(array)或尝试在一个全局变量保存阵列document.array = array，这样你就可以在浏览器控制台访问它。

来源

2016-07-11 10:40:57

如何将AngularJS范围对象转换为简单的JS数组？

回答

相关问题