私は角度を学習しており、テストページで動的バインディングを実装しようとしました。私の目標は、入力ボックスを実装することでした。各ボックスは、動的に取得された変数名のいずれかにバインドされました。継承されたスコープ変数への角度バインド
結果の配列をルートスコープに宣言しない場合は、繰り返しごとに結果配列が作成され、各ボックスの下に結果の内容が表示されます。
デカールがルートスコープになっても、それを再宣言しないので、シャドーイングを適用する必要はなく、各ボックスをルートスコープの配列内の変数にバインドする必要があります。しかし、代わりに、各ボックスの下にルートスコープの配列の内容しか表示されず、入力を変更しても変更されません。 助けていただければ幸いです。ここで
は私の例です:
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();
}
});
ありがとう!私の間違いは、次回に尋ねる前に良く見えます。 – user3177112