Question

我有一个定义的基本控制器，它有一个名为setSector的函数（在底部）

function AppCtrl ($scope) {
    $scope.sectors =
    {
        "Sector": [
            {
                "sectorDesc": "London and South East",
                "sectorCode": "LSE",
                "SectorPPM": {
                    "Total": "10329",
                    "OnTime": "9195",
                    "Late": "1134",
                    "CancelVeryLate": "206",
                    "PPM": {
                        "rag": "A",
                        "text": "89"
                    },
                    "RollingPPM": {
                        "trendInd": "-",
                        "rag": "R",
                        "text": "83"
                    }
                }
            },
            {
                "sectorDesc": "Long Distance",
                "sectorCode": "LD",
                "SectorPPM": {
                    "Total": "1383",
                    "OnTime": "1159",
                    "Late": "224",
                    "CancelVeryLate": "68",
                    "PPM": {
                        "rag": "R",
                        "text": "83"
                    },
                    "RollingPPM": {
                        "trendInd": "+",
                        "rag": "G",
                        "text": "92"
                    }
                }
            },
            {
                "sectorDesc": "Regional",
                "sectorCode": "REG",
                "SectorPPM": {
                    "Total": "5348",
                    "OnTime": "4678",
                    "Late": "670",
                    "CancelVeryLate": "196",
                    "PPM": {
                        "rag": "R",
                        "text": "87"
                    },
                    "RollingPPM": {
                        "trendInd": "=",
                        "rag": "R",
                        "text": "87"
                    }
                }
            },
            {
                "sectorDesc": "Scotland",
                "sectorCode": "SCO",
                "SectorPPM": {
                    "Total": "2026",
                    "OnTime": "1861",
                    "Late": "165",
                    "CancelVeryLate": "41",
                    "PPM": {
                        "rag": "A",
                        "text": "91"
                    },
                    "RollingPPM": {
                        "trendInd": "+",
                        "rag": "G",
                        "text": "94"
                    }
                }
            }
        ]
    }

    $scope.currentSector = null;

    $scope.setSector = function (sectorCode) {
        $scope.currentSector = $scope.sectors[sectorCode];
    };
}

从我的索引文件中调用。

<html ng-app>
<head>
    <title>PPM Viewer</title>
    <script type="text/javascript" src="js/lib/angular.min.js"></script>
    <script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
    <script type="text/javascript" src="js/controllers/app.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>

<body>
<div class="container" ng-controller="AppCtrl">
    <h1>PPM Dashboard</h1>
    <ul>
        <li ng-repeat="sector in sectors.Sector">
            <a href="" ng-click="setSector(sector.sectorCode)">{{sector.sectorCode}} - {{sector.sectorDesc}}</a>
        </li>
    </ul>

    <p>
        Current sector : {{currentSector.sectorDesc}}
        Current code : {{currentSector.sectorCode}}
    </p>

</div>

</body>

当您点击UL列表中的扇区时，点击扇区的名称应该显示在底部，但由于某种原因，该功能不会传回任何内容。

我确定这是因为需要在函数中的某处指定$ scope.sectors.Sector。但我尝试的任何东西都无法运作我对角度和范围仍然很陌生，并且认为我需要强制范围进入更深层次......只是不确定如何

任何人都可以建议我如何制作功能......功能！ =）

非常感谢

Answer 1

您正在设置$ scope.currentSector，而不是.sectorDesc

所以要么改变你的功能或模板：

<强>模板：

Current sector : {{currentSector}}

或功能：

 $scope.currentSector = {};
 $scope.setSector = function (sectorCode) {
    $scope.currentSector.sectorDesc = $scope.sectors[sectorCode];
 };

Answer 2

这样做的更简洁的方法是使用Angular的$ index功能。尝试将代码更改为：

HTML

<ul>
   <li ng-repeat="sector in sectors.Sector">
       <a href="" ng-click="setSector($index)">{{sector.sectorCode}} - {{sector.sectorDesc}}</a>
   </li>
</ul>

JS

$scope.setSector = function (index) {
   $scope.currentSector = $scope.sectors.Sector[index];
};

ng-repeat中的$ index表示数组中项目的索引，您可以在javascript中使用该索引从数组中选择正确的扇区。 http://docs.angularjs.org/api/ng.directive:ngRepeat

NG-CLICK简单函数在Angular中不通过变量

2 个答案: