2016-06-24 19 views
1

私は角度を学習しており、テストページで動的バインディングを実装しようとしました。私の目標は、入力ボックスを実装することでした。各ボックスは、動的に取得された変数名のいずれかにバインドされました。継承されたスコープ変数への角度バインド

結果の配列をルートスコープに宣言しない場合は、繰り返しごとに結果配列が作成され、各ボックスの下に結果の内容が表示されます。

デカールがルートスコープになっても、それを再宣言しないので、シャドーイングを適用する必要はなく、各ボックスをルートスコープの配列内の変数にバインドする必要があります。しかし、代わりに、各ボックスの下にルートスコープの配列の内容しか表示されず、入力を変更しても変更されません。 助けていただければ幸いです。ここで

は私の例です:

HTML:

<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="index.js"></script> 
<body ng-app="app" ng-controller="main" > <!--ng-init="results = [{'TEST': 1}]" --> 

<div> 
    <p>Name: <input type="text" ng-model="name"></p> 
    <p ng-bind="name"></p> 
    <input type="button" value="Clickme" ng-click="clickfnc()"> 
    <input type="button" value="Dump" ng-click="dump()"> 
    <input type="button" value="Pop" ng-click="remove()"> 
</div> 

<div ng-repeat="x in params"> 
    <p>Name: <input type="text" ng-model="results[x.name]"></p> 
    <p ng-bind="results[x.name]"></p> 
    <p>{{x.name}}</p> 
    <p>{{results}}</p> 
    <p>{{params}}</p> 
</div> 

<hr> 

<p ng-bind="results"></p> 

<hr> 

</body> 
</html> 

index.js:

var app = angular.module('app', []); 
app.controller('main', function ($scope) 
{ 
    $scope.clickfnc = function() 
    { 
     console.log('click'); 

     $scope.params = [ 
      { 
       name: 'ACCOUNT' 
      }, 
      { 
       name: 'AMOUNT' 
      } 
     ]; 
    }; 

    $scope.dump = function() 
    { 
     console.log($scope.results) 
    }; 

    $scope.remove = function() 
    { 
     $scope.params.pop(); 
    } 
}); 

答えて

1

私はあなたの目標は、あなたが作成した失敗した理由が何であるかを正しく理解している場合results配列を作成しますが、オブジェクトを作成する必要があります。
ここに:<p>Name: <input type="text" ng-model="results[x.name]"></p>
新しいプロパティを結果に割り当てるため、オブジェクトである必要があります。あなたはこのフィドルをチェックすることができます - https://jsfiddle.net/kb5udcac/

+0

ありがとう!私の間違いは、次回に尋ねる前に良く見えます。 – user3177112

関連する問題