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'はコントローラのコンストラクタ関数のoutsiceにアクセスできません。既にアクセスしている配列を作成するときは未定義です。もう一つは、定義されていない 'obj'です。そこにも 'formData'を使うべきです。しかし、角度のあるアプリにはコードではありませんが、これは実験ではありません。角のあるアプリには*公に*アクセス可能なコードはありません。通常は。 –

関数を作成し、そのチェックボックスの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のようなブラウザプラグインを使用するか、代わりにalert(array)のconsole.log(array)を使用するか、ブラウザのコンソールにアクセスすることができますので、document.array = arrayでグローバル変数の配列を保存しようとします。

出典

2016-07-11 10:40:57

AngularJSスコープオブジェクトを単純なJS配列に変換するには？

答えて

関連する問題