Question

 <script>
        var app = angular.module("myApp", []);
        app.controller("myCntrl", function ($scope, $http) {
            $scope.studentorder = "StudetnID";
            $scope.studetnName = ""; //ng-model="studetnName"
            //display rows as colums function scope to do
            $scope.newrow = function (the_index) {
              //------------here is where my problem is-------------------------------
                var b = the_index.toString();
                var a = parseInt(b, 10);
                if(a==2)
                document.getElementsByClassName("div-table-col")[a].setAttribute("class", "div-table-row");
             };

            $scope.Save = function () {
                var httpreq = {
                    method: 'POST',
                    url: 'Default.aspx/Save',
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8',
                        'dataType': 'json'
                    },
                    data: { StudentName: $scope.studetnName }
                }
                $http(httpreq).success(function (response) {
                    $scope.fillList();
                    alert("Saved successfully.");
                })
            };
            $scope.Delete = function (SID) {
                if (confirm("Are you sure want to delete?")) {
                    var httpreq = {
                        method: 'POST',
                        url: 'Default.aspx/DeleteThisIsInsideCSharpAndItsAMethod',
                        headers: {
                            'Content-Type': 'application/json; charset=utf-8',
                            'dataType': 'json'
                        },
                        data: { StudentID: SID }
                    }
                    $http(httpreq).success(function (response) {
                        $scope.fillList();
                        alert("Deleted successfully.");
                    })
                }
            };
            $scope.fillList = function () {
                $scope.studetnName = "";
                var httpreq = {
                    method: 'POST',
                    url: 'Default.aspx/GetList',
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8',
                        'dataType': 'json'
                    },
                    data: {}
                }
                $http(httpreq).success(function (response) {
                    $scope.StudentList = response.d;
                })
            };
            $scope.fillList();
        });
    </script>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
       <link rel="stylesheet" type="text/css" href="AlternatingRows.css" />
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div ng-app="myApp" ng-controller="myCntrl">
        <table>
            <tr>
                <td>
                    Student Name :
                </td>
                <td>
                    <input type="text" id="txtStudentName" ng-model="studetnName" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" value="Save" ng-click="Save()" />
                </td>
            </tr>
        </table>
        
        <br />
        <h1>DETAILS</h1>
        <br />
        <div> 
               <div class="div-table-col" 
                   ng-repeat="student in StudentList | orderBy : studentorder"
                   ng-if="$index % 2 == 0"
                   ng-init="newrow($index)"
                    >
                    <!--id number-->
                    <div ng-bind="student.StudentID" class="div-table-col"> 
                            id number

                        </div>
                    <!--image-->
                    <div>
                    
                            <img ng-src="{{student.StudentName}}" class="div-table-col">   
                    
                    </div>
                    <!--delete-->
                    <div class="div-table-col">

                        <a href="#" ng-click="Delete(student.StudentID)">Delete</a>
                     
                    </div>


    </div> <!--div id column-->
        </div> <!--ImagesContainer-->
        <!--scripting functions-->
   </form>
</body>
</html>

我通过$index并且工作正常，它从0开始并上升到3，所以我知道我正在传递数字。指数不存在。到目前为止，我尝试了以下内容：

var a =

1.parseInt(the_index,10)

2.parseInt(the_index.toString(),10)

3.parseInt(the_index)

4.Number(the_index)

document.getElementsByClassName("div-table-col")[a]....

但是a不被识别为任何数字，默认情况下为0。

Answer 1

顺便说一下，你知道$even里面有$odd和ngRepeat吗？所以不要这样做：

<div class="div-table-col" 
    ng-repeat="student in StudentList | orderBy : studentorder"
    ng-if="$index % 2 == 0"
    ng-init="newrow($index)"
>

你可以做到

<div class="div-table-col" 
    ng-repeat="student in StudentList | orderBy : studentorder"
    ng-if="$even"
    ng-class="{'div-table-row': $even}"
>

因为如果我正确理解了您的代码，您就会显示偶数行并向其添加.div-table-row类。

您还可以在ng-class-odd="expression"内使用ng-class-even="expression"和ngRepeat根据元素位置设置类。

https://code.angularjs.org/1.5.0/docs/api/ng/directive/ngClassEven https://code.angularjs.org/1.5.0/docs/api/ng/directive/ngClassOdd

仅供参考 - 从控制器访问DOM是一种不好的做法。您应该使用指令或内置angularjs指令之一。

如何在javascript中使用int变量来访问索引中的数组？

1 个答案: