gpt4 book ai didi

javascript - 值未获取 - Angular JS

转载 作者:行者123 更新时间:2023-11-28 12:30:50 25 4
gpt4 key购买 nike

我用 angular-js 创建了一个应用程序,用于在 html 表中动态打印某些值。该表基本上有六列,其中三列(工作名称、团队名称、地点名称)是静态固定的,最后三列(服务一、服务二、服务三>) 显示取决于可见性和顺序。

代码工作正常,但问题是因为我们无法预测三个服务的可见性的顺序,在 Controller 脚本中有一个服务 json,其中有关可见性和顺序的信息(这是通过休息调用,暂时我已经静态编码)并根据顺序和可见性,它应该打印表中的值。代码正在运行,但该值未编译。

我的代码如下

<强> http://jsfiddle.net/ADukg/4934/

index.html

<!doctype html>
<html ng-app="form-example1">

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<div ng-controller="Controller">
<table border="1">
<thead>
<tr>
<th>Work Name</th>
<th>Team Name</th>
<th>Place Name</th>
<th ng-repeat="servopt in services|filter:{ display: 'block' }|orderBy:'order'">{{servopt.servicename}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="val in datas">
<td>{{val.workname}}</td>
<td>{{val.teamname}}</td>
<td>{{val.placename}}</td>
<td ng-repeat="servopt in services|filter:{ display: 'block' }|orderBy:'order'">{{servopt.serviceid}}</td>
</tr>
</tbody>
</table>
</div>

</body>

</html>

脚本

var app = angular.module('form-example1', []);

app.controller("Controller", ['$scope', function($scope){

$scope.services = [
{servicename: 'Service One', serviceid: '{{serviceOne}}', display: 'block', order: 3},
{servicename: 'Service Two', serviceid: '{{serviceTwo}}', display: 'none', order: 2},
{servicename: 'Service Three', serviceid: '{{serviceThree}}', display: 'block', order: 1}
];


$scope.datas = [
{workname: 'France', teamname: 'Team PQL', placename: 'Place 1', serviceOne: 'ABC 1', serviceTwo: 'DEF 1', serviceThree: 'GHI 1'},
{workname: 'India', teamname: 'Team PLQ', placename: 'Place 2', serviceOne: 'ABC 2', serviceTwo: 'DEF 2', serviceThree: 'GHI 2'},
{workname: 'USA', teamname: 'Team DEF', placename: 'Place 3', serviceOne: 'ABC 3', serviceTwo: 'DEF 3', serviceThree: 'GHI 3'},
{workname: 'China', teamname: 'Team GHI', placename: 'Place 4', serviceOne: 'ABC 4', serviceTwo: 'DEF 4', serviceThree: 'GHI 4'}
];

}]);

最佳答案

从 serviceid 中删除 {{}}:

$scope.services = [
{servicename: 'Service One', serviceid: 'serviceOne', display: 'block', order: 3},
{servicename: 'Service Two', serviceid: 'serviceTwo', display: 'none', order: 2},
{servicename: 'Service Three', serviceid: 'serviceThree', display: 'block', order: 1}
];

使用 JavaScript 括号表示法获取值:val[servopt.serviceid]

<tr ng-repeat="val in datas">
<td>{{val.workname}}</td>
<td>{{val.teamname}}</td>
<td>{{val.placename}}</td>
<td ng-repeat="servopt in services|filter:{ display: 'block' }|orderBy:'order'">{{val[servopt.serviceid]}}</td>
</tr>

DEMO

关于javascript - 值未获取 - Angular JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22128823/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com