1


在过去的几天里，我一直在努力解决 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 生成了三个单选按钮。我们已经为按钮分配了计算功能，您很快就会看到它的作用。这是计算（）函数：

$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="record in records" 中显示任何结果，因为它引用的是一个空对象（$scope.a = []; 实际上在初始化时为空），尽管我可以通过简单地写入我的 html {{a.length}} 来查看数组的长度，因此显然数组的长度正在增加。我的问题是如何在我的角度数组中使用 $scope.[some array].length 。我应该使用带有单选按钮的 ng-model 吗？会有帮助吗？我该如何解决这个目前让我卡在一个地方的问题。请帮助我真的没有解决方案。先感谢您

4

1 回答 1

0

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

[编辑] 我看看问题出在哪里！在我开始解释这种情况之前，我想建议您阅读更多关于 AngularJS 以及如何在 AngularJS 世界中思考的信息（如果我有 jQuery 背景，这可能有助于“在 AngularJS 中思考”？）

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

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

我修好了它：

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

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

更新后的代码：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>
于 2013-10-26T18:41:53.137 回答