За прошедшие несколько дней я борюсь с вопросом о AngularJS. Я новичок в этом, и отсюда и возникают мои проблемы.
В любом случае, вот моя проблема. У меня есть приложение, которое сделано для того, чтобы задавать пользователям некоторые вопросы, собирать ответы и отображать их пользователю.
HTML, является:угловой js угловой не читает длину массива
<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-->
А вот 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 генерирует три переключателя. и у нас есть функция вычисления, назначенная кнопке, скоро вы увидите, что она делает. Вот функция вычисления():
$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-массивов, ответственных за сбор ответов. 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= [];
Тогда я написал список элементов, каждый один representic один массив, то есть ...
<div ng-repeat="record in records">
<a href="{{record.link()}}"><div class="rel fptsans {{record.className()}}">{{record.item}}</div></a>
</div>
нг-повтор генерируется с этим записывает массив, как показано ниже:
$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 не показывает никаких результатов в записи ng-repeat = "в записи", потому что она заявляет пустые объекты ($ scope.a = []; на самом деле пуст при инициализации), несмотря на то, что я могу просмотреть длину массива, просто записав в свой html {{a.length}}, так что, по-видимому, длина массива увеличивается. Мой вопрос: как я могу использовать $ scope. [Some array] .length внутри моего углового массива. Должен ли я использовать ng-модель с переключателями? было бы полезно? Как я могу решить эту проблему, которая в настоящее время заставляла меня застрять в одном месте. Пожалуйста, помогите мне действительно избавиться от решений. Заранее спасибо
предлагает создать простую демонстрацию в jsfiddle.net или plunker, который отображает проблему – charlietfl