为什么Angular视图中的数组表达式不起作用

Why array expression in Angular view not working?

本文关键字：数组 表达式 不起作用 Angular 视图 为什么      更新时间：2024-01-11

要将字段的值转换为显示名称，我在视图中使用表达式作为一行。例如，后端将性别发送为男性的"M"和女性的"F"，为此我将视图写成：

<td>{{ {'M': "Male", 'F': "Femail"} [partB.gender] }}</td>

而且效果很好。

在我的django模型中，我有相当数量的选择字段。其中一个是作为true/false接收的布尔值，为了将该字段显示为"是"/"否"，我在视图中将表达式写为：

<td>
 {{ ["No", "Yes"][+partB.is_employee_with_substantial_interest] }}
</td>

但是这不起作用。

我认为这可能是.和一元+之间的优先级问题，但事实并非如此。检查：

>> var a = {a: true, b: false}
undefined
>> a.a
true
>> +a.a
1

就我对JavaScript的了解而言，表达式["No", "Yes"][+partB.is_employee_with_substantial_interest]本身并没有错。

在问这个问题之前，我试着自己在plunker 上弄清楚

<html ng-app="myApp" >
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
</head>
<body ng-controller="myCtrl">
  <h1>AngularJS Template Query </h1>
   <h4> JavaScript Working </h4>
   <ul>
   <li id="a"> Grijesh Chauhan  </li>
   <li id="b"> Grijesh Chauhan  </li>
   <li id="c"> Grijesh Chauhan  </li>
   <li id="d"> Grijesh Chauhan  </li>
   <li id="e"> Grijesh Chauhan  </li>
   </ul>
  <div>
  <h4> Angular Code not Working </h4>
  
  <ul>
<li> {{ ["No", "Yes"][+data.b] }} </li>
<li> {{ ["No", "Yes"][+data.a] }} </li>
<li> {{ { true: "Yes", false: "No"}[data.b]  }} </li>
<li> {{ { true: "Yes", false: "No"}[data.a]  }} </li>
<li> {{ { 1: "Yes", 0: "No"}[+data.b]  }} </li>
<li> {{ { 1: "Yes", 0: "No"}[+data.a]  }} </li>
   </ul>
 
  </div>
  
  <script>
 var  data = {a: true, b: false};
 
 document.getElementById('a').innerHTML = ["No", "Yes"][+data.a];
 document.getElementById('b').innerHTML = ["No", "Yes"][+data.b];
 document.getElementById('c').innerHTML = { 1: "Yes", 0: "No"}[+data.b];
 document.getElementById('d').innerHTML = { 1: "Yes", 0: "No"}[+data.a]; 
 document.getElementById('e').innerHTML = { true: "Yes", false: "No"}[data.a]; 
  </script>
  <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.data = { a: true, b: false };
});
  </script>
</body>
</html>

Angular有自己的评估函数。他不是在幕后表演eval（）。所以有些在Javascript中有效的东西就是不能用angular表达式。

在opposite上，Angular中有一些东西在javascript中崩溃，例如

a.b.c.d == true

如果没有定义a、b或c，将在JS上崩溃，在角度表达式中，这将不需要

a && a.b && a.b.c && a.b.c.d

对于您的问题，您可以尝试

<li> {{ { "true": "Yes", "false": "No"}["'""+data.a+"'""]  }} </li>

或者类似的东西，试图转换字符串中的布尔值。

其他更常见的解决方法

<li ng-if="data.a">Yes</li>
<li ng-if="!data.a">No</li>

这更详细，但最终更可读。

相关文章：