Question

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

代码工作正常，但问题是因为我们无法预测三个服务也将是可见性的顺序，在控制器脚本中有一个服务json，其中有关可见性和顺序的信息（这是通过休息呼叫，暂时我已经静态编码）并且基于顺序和可见性它应该打印表中的值。代码正在运行，但未编译该值。

我的代码如下：

的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'}
];

  }]);

Answer 1

从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

Answer 2

使用AngularJS，{{和}}用于视图中的表达式评估。

在javascript文件中，您不需要使用{{}}，因为您只是为对象属性赋值。

正确的例子：

在控制器中。

$scope.obj = {
    test: '1234'
};

在视图中

<span>{{ obj.test }}</span>

价值没有得到 - 角度JS

2 个答案: