angularjs角不读取阵列的长度 [英] angularjs angular doesn't read the length of an array

问题描述

结果
对于通过几天我与AngularJS此事挣扎。我是新手在这一点，这就是我的麻烦，从造成的。结果
反正这里是我的问题。我有一个专为要求用户一些问题，收集答案并显示给用户提供的应用程式。结果
的HTML是：

for the passed few days I am struggling with the matter of AngularJS. I am novice at this and that's where my troubles result from.
Anyway here is my problem. I have an app that is made made for asking users some questions, collecting answers and displaying them to the user.
The HTML is:

   <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管理NG-重复上面的：

And here is the JS managing the ng-repeat above:

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-重复生成三个单选按钮。我们必须分配给该按钮后，你会看到它做什么的计算功能。
下面是计算（）函数：

Nothing really complicated and so far it works fine. Now you can see that ng-repeat generates three radio buttons. and we have compute function assigned to the button soon you'll see what it does. Here is the compute() function:

$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：

Answered questions are passed to one of 12th arrays responsible for collecting answers. 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= [];

然后我写的元素列表每一个重presentic一个阵列，那就是...

Then I wrote a list of elements each one representic one array, that is...

<div ng-repeat="record in records">
<a href="{{record.link()}}"><div class="rel fptsans {{record.className()}}">{{record.item}}</div></a>
</div>

NG-重复与此生成的记录数组如下：

ng-repeat is generated with this records array as below:

$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.

我确信应用程序的每一个部分是一致的，但很快我就快要得到意外的是角犯规显示NG重复=中记载记录中的任何结果，因为它是reffering到一个空的对象（$范围.A = [];其实在初始化空的），尽管我能够在我的html简单地写来查看数组的长度{{则为a.length}}这样显然是数组的长度不断增加。
我的问题是，请问有什么可以用$范围。我的角阵内[某些阵列]。长度。我应该使用NG-模型单选按钮？这将是有益的？我怎样才能解决这个问题现在让我停留在一个place.Please的帮助，我真的出解决方案，其中。谢谢你在前进

I was sure that every part of the app was consistent but soon I was about to get surprised that Angular doesnt show any results within the ng-repeat="record in records" because it is reffering to an empty objects ($scope.a = []; is in fact empty at initialization), despite that I am able to view the length of an array by simply writing in my html {{a.length}} so apparently the length of an array is increasing. My question is how may I use $scope.[some array].length inside my angular array. Should I use ng-model with radio buttons ? would it be helpful ? How can I solve this problem which currently made me stuck in one place.Please help I am really out of solutions. Thank You in advance

推荐答案

我觉得你scope.records填充$被调用计算之前。这将导致在年初空数组。您需要通过看你的阵列重新填充$ scope.records。查一查$手表，看看它是如何工作的。我个人认为你不应该把这些所有的a，b，c等在$范围内的项目，但你应该把他们像$ scope.Questions.a，$ scope.Questions.b，$ scope.Questions一些事情.C，等等，那么你可以创建$ scope.Questions或单个项目的手表。

I think you are populating the $scope.records before the compute is being called. That would result to empty array at the beginning. You need to re-populate the $scope.records by watching your arrays. Look up $watch and see how it works. I personally think you should not put all of those a, b, c, etc. items in the $scope but you should put them in some thing like $scope.Questions.a, $scope.Questions.b, $scope.Questions.c, etc. Then you can create a watch on $scope.Questions or individual items.

我看到那里的问题！在我开始解释我想推荐你阅读更多关于AngularJS以及如何思考AngularJS世情（也许这可以帮助<一个href=\"http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background\">How做I＆QUOT;认为AngularJS＆QUOT;如果我有一个jQuery背景）

有您的code的几个问题：一是你没有拥有{{在你的类定义

There are a few problems with your code: First you didnt have {{ in your class definition

<div class="record.className}}">

我固定它：

<div class="{{record.className}}">

另一个问题是，你是在控制器的初始化初始化$ scope.records的类名和链接属性，你永远不会更新根据apenic改变这些值。这意味着当$ scope.alepnic是空的，因此两个记录将有类正常的$ scope.Records被初始化。现在，如果你增加scope.Records $没什么长度更新记录，以反映更改。让我感动的初始化code到计算方法，这样你的记录被重新评估每一个阵列的变化的时间。

the other problem was that you were initializing the ClassName and Link properties of $scope.records in the initialization of the controller and you never updated those values based on the changes in apenic. That means the $scope.Records is being initialized when $scope.alepnic is empty hence both records would have the class "normal". Now if you increase the length of $scope.Records nothing is updating your records to reflect the changes. I moved the initialization code into the compute method so your records are re-evaluated every time your array changes.

更新code： http://jsfiddle.net/Tb9j5/8/

$scope.compute=function()
{
    $scope.alpeic.push(1);
    $scope.records = [
    {id:0,
     link:$scope.alpeic.length > 5 ? "alpeic.html" : "",
     className:$scope.alpeic.length > 5 ? "special" : "normal",
     item:"This is item A"},
    {id:1,
    link:$scope.alpeic.length > 5 ? "alpeic.html" : "",
    className:$scope.alpeic.length > 5 ? "special" : "normal",
     item:"This is item B"}];
}

$scope.compute();

这是不是解决问​​题的最佳方法角，但传达给你一个最简单的。另一个方法就是设置你的alpeic阵列上的$手表，然后重新评估在$ scope.Records的属性。你也可以和应该使用NG-类设置类atrributes而无需范围：

This is not the best Angular method to solve your problem but is the easiest one to communicate to you. The other ways is to setup a $watch on your alpeic array and then re-evaluate the properties in your $scope.Records. Also you could and should use ng-class to set class atrributes without needing a scope:

<div ng-repeat="record in records">
    <a href="alpeic.html">
        <div ng-class="{special: alpeic.length >= 5, normal: alpeic.length < 5}">{{record.item}}</div>
   </a>                          
</div>

这篇关于angularjs角不读取阵列的长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！