過去数日間、私はAngularJSの問題に苦しんでいます。私はこれに初心者であり、それが私のトラブルの原因です。
とにかくここに私の問題があります。ユーザーにいくつかの質問をし、回答を収集してユーザーに表示するために作成されたアプリがあります。
HTML は次のとおりです。
<div ng-repeat="dialog in dialogWindows">
<div id="{{dialog.idName}}" class="bold abs">
<div class="questionContainer rel">
<a href=""><button ng-click="compute()>Fake results</button></a>
<div ng-repeat="input in dialog.inputs">
<input type="radio" id="{{input.radio}}" name="{{dialog.name}}" value="{{input.value}}">
<label for="{{input.radio}}" class="answer abs {{input.a}}">{{input.answer}}</label>
</div>
</div>
</div>
</div><!--/ng-repeat-->
</div><!--/ng-controller-->
上記の ng-repeat を管理する JS は次のとおりです。
function dialogWindows($scope,localStorageService){
$scope.dialogWindows = [
{id:0,
idName:"pigmentation",
number:"1",
name:"Pigmentation",
answer1:"Clear complexion",
answer2:"Semi-swarthy complexion",
answer3:"Swarthy complexion",
answer4:"",
answer5:"",
answer6:"",
href:"#hairColor",
hrefBack:"index.html",
inputs:[{id:0,a:"a1",answer:"Clear compexion", radio:"radio1",value:"1"},
{id:1,a:"a3", answer:"Semi-swarthy complexion", radio: "radio2",value:"1"},
{id:2,a:"a5",answer:"Swarthy complexion",radio:"radio3",value:"1"}
]
特に複雑なことはなく、今のところ問題なく動作しています。これで、ng-repeat が 3 つのラジオ ボタンを生成することがわかります。ボタンに計算機能が割り当てられています。すぐにその機能を確認できます。次に、compute() 関数を示します。
$scope.compute = function() {
if (document.getElementById('radio1').checked) {
$scope.a.push(1);
$scope.b.push(1);
$scope.c.push(1);
$scope.d.push(1);
$scope.e.push(1);
$scope.f.push(1);
$scope.g.push(1);
$scope.h.push(1);
$scope.i.push(1);
$scope.j.push(1);
$scope.k.push(1);
$scope.l.push(1);
$scope.m.push(1);
$scope.n.push(1);
$scope.o.push(1);
$scope.p.push(1);
} else if (document.getElementById('radio2').checked) {
$scope.r.push(1);
$scope.s.push(1);
$scope.t.push(1);
$scope.u.push(1);
$scope.w.push(1);
} else if(document.getElementById("radio3").checked){
$scope.z.push(1);
$scope.x.push(1);
$scope.y.push(1);
$scope.q.push(1);
$scope.ab.push(1);
}
回答済みの質問は、回答の収集を担当する 12 番目の配列の 1 つに渡されます。JS:
$scope.a= [];
$scope.b= [];
$scope.c = [];
$scope.c= [];
$scope.d= [];
$scope.e= [];
$scope.f= [];
$scope.g= [];
$scope.h = [];
$scope.i= [];
$scope.j= [];
$scope.k= [];
$scope.l= [];
$scope.m= [];
$scope.n= [];
$scope.o= [];
$scope.p= [];
$scope.r= [];
$scope.s= [];
$scope.t= [];
$scope.u= [];
$scope.w= [];
$scope.z= [];
$scope.x= [];
$scope.y= [];
$scope.q= [];
$scope.ab= [];
次に、それぞれが 1 つの配列を表す要素のリストを作成しました。
<div ng-repeat="record in records">
<a href="{{record.link()}}"><div class="rel fptsans {{record.className()}}">{{record.item}}</div></a>
</div>
ng-repeat は、以下のようにこのレコード配列で生成されます。
$scope.records = [
{id:0,
className : $scope.a.length > 0 ? 'special' : 'normal',
item: "a",
link: $scope.className == "special" ? "a.html" : ''
},
{id:1,
className: $scope.b.length > 0 ? 'special' : 'normal',
item:"b",
link: $scope.className == "special" ? "b.html" : ''
},
{id:2,
className: $scope.c.length > 0 ? 'special' : 'normal',
item:"c",
link: $scope.className == "special" ? "c.html" : ''
},
//and so on to 12th.
アプリのすべての部分が一貫していると確信していましたが、Angular が空のオブジェクト ($scope.a = []; は実際には初期化時に空です)、html {{a.length}} に書き込むだけで配列の長さを表示できるにもかかわらず、明らかに配列の長さが増加しています。私の質問は、角度配列内で $scope.[some array].length をどのように使用できるかです。ラジオボタンで ng-model を使用する必要がありますか? 役に立ちますか？現在、1か所で立ち往生しているこの問題を解決するにはどうすればよいですか。本当に解決策がありません。助けてください。前もって感謝します