Question

在过去的几天里，我正在努力解决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-->

这是JS管理上面的ng-repeat：

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生成三个单选按钮。我们很快就会分配给按钮的计算功能，你会看到它的功能。这是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个阵列之一。 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= [];

然后我写了一个元素列表，每个元素代表一个数组，即......

<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在ng-repeat =“记录中的记录”中没有显示任何结果，因为它是对空对象的影响（$ scope） .a = [];实际上在初始化时是空的），尽管我能够通过简单地写入我的html {{a.length}}来查看数组的长度，所以显然数组的长度正在增加。我的问题是如何在我的angular数组中使用$ scope。[some array] .length。我应该使用带有单选按钮的ng-model吗？会有帮助吗？我怎样才能解决目前困在一个地方的这个问题。请帮助我真的没有解决方案。提前谢谢

Answer 1

我认为你在调用计算之前填充了$ scope.records。这将导致在开始时清空数组。您需要通过观察阵列来重新填充$ scope.records。查看$ watch并查看其工作原理。我个人认为你不应该把所有那些a，b，c等项目放在$ scope中，但是你应该将它们放在像$ scope.Questions.a，$ scope.Questions.b，$ scope.Questions这样的东西中。 .c等。然后你可以在$ scope.Questions或单个项目上创建一个手表。

[编辑] 我知道问题在哪里！在我开始解释这种情况之前，我想建议你阅读更多关于AngularJS以及如何在AngularJS世界中思考的问题（也许这可以帮助"Thinking in AngularJS" if I have a jQuery background?）

您的代码存在一些问题：首先，您没有{{在您的课程定义中

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

我修好了：

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

另一个问题是你在控制器的初始化中初始化$ scope.records的ClassName和Link属性，你从未根据apenic的变化更新这些值。这意味着当$ scope.alepnic为空时，$ scope.Records被初始化，因此两个记录都将具有“正常”类。现在，如果你增加$ scope的长度。记录没有更新你的记录以反映更改。我将初始化代码移动到了计算方法中，因此每次数组更改时都会重新评估记录。

更新的代码：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();

这不是解决问题的最佳Angular方法，但却是最容易与您沟通的方法。其他方法是在您的alpeic数组上设置$ watch，然后重新评估$ scope.Records中的属性。您也可以并且应该使用ng-class来设置类属性而不需要范围：

<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 angular不读取数组的长度

1 个答案: