基于条件的表达式

Question

我刚开始练习 Angular JS，我成功地获得了第一个输出，但是当我尝试根据我的情况修改代码时，它给了我错误的输出。

我提供 text box 供献血者输入他的名字和 drop down 选择他的血型。第一个代码将在他提供数据时显示捐赠者的姓名和血型

示例代码：-

<!DOCTYPE html>
<html lang="eng-US">
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 </head>
 <body>
  <div ng-app="">
   <div>
    <span>Donor name :  <input type="text" ng-model="donorName"></span>
   </div>
   <div>
    <span>
     Blood group :  <select ng-model="donorGroup">
          <option value="A+">A+</option>
          <option value="A-">A-</option>
          <option value="AB+">AB+</option>
          <option value="AB-">AB-</option>
          <option value="B+">B+</option>
          <option value="B-">B-</option>
          <option value="O+">O+</option>
          <option value="O-">O-</option>
         </select>         
    </span>
   </div>   
   <span> {{donorName}} {{donorGroup}} </span>
  </div>
 </body>
</html>

但是当 donorName 和 donorGroup 都不为空时，我想将其显示为 <donorName>'s blood group is <donorGroup>。我重写了很多次代码，我不能在这里展示所有的代码，因为它都是错误的，但这是我最后尝试的，也不能正常工作

<!DOCTYPE html>
<html lang="eng-US">
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 </head>
 <body>
  <div ng-app="">
   <div>
    <span>Donor name :  <input type="text" ng-model="donorName"></span>
   </div>
   <div>
    <span>
     Blood group :  <select ng-model="donorGroup">
          <option value="A+">A+</option>
          <option value="A-">A-</option>
          <option value="AB+">AB+</option>
          <option value="AB-">AB-</option>
          <option value="B+">B+</option>
          <option value="B-">B-</option>
          <option value="O+">O+</option>
          <option value="O-">O-</option>
         </select>         
    </span>
   </div>   
   <span> {{donorName != null && donorName != '') ? '{{donorName}}'s' blood group is' + {{donorGroup}} : ''}} </span>
  </div>
 </body>
</html>

所以我的疑问是如何在 Angular JS 中的布尔条件中插入表达式？

Answer 1

只需执行：

<span data-ng-show="donorName && donorGroup">{{donorName}} blood group is {{donorGroup}}</span>

在上面的代码中，使用了内置指令ng-show

此外，如果您仍想在插值内部进行操作，我认为这不是一种巧妙的方法，您可以简单地执行以下操作：

<span>{{donorName && donorGroup? donorName + "'s blood group is " + donorGroup: '' }}</span>

Answer 2

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">


  <div ng-app="">
   <div>
    <span>Donor name :  <input type="text" ng-model="donorName"></span>
   </div>
   <div>
    <span>
     Blood group :  <select ng-model="donorGroup">
          <option value="A+">A+</option>
          <option value="A-">A-</option>
          <option value="AB+">AB+</option>
          <option value="AB-">AB-</option>
          <option value="B+">B+</option>
          <option value="B-">B-</option>
          <option value="O+">O+</option>
          <option value="O-">O-</option>
         </select>         
    </span>
   </div>   
   
   <span> {{donorName!= ''? donorName: ''}}'s blood group is {{donorGroup}} </span>
  </div>
</div>

</div>

</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

});
</script>
</html>

工作代码片段

Answer 3

你可以试试下面的代码。

        <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <body>

    <div ng-app ="sortApp" ng-controller ="mainController">
                    <!DOCTYPE html>
<html lang="eng-US">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="">
            <div>
                <span>Donor name :  <input type="text" ng-model="donorName"></span>
            </div>
            <div>
                <span>
                    Blood group :   <select ng-model="donorGroup">
                                        <option value="A+">A+</option>
                                        <option value="A-">A-</option>
                                        <option value="AB+">AB+</option>
                                        <option value="AB-">AB-</option>
                                        <option value="B+">B+</option>
                                        <option value="B-">B-</option>
                                        <option value="O+">O+</option>
                                        <option value="O-">O-</option>
                                    </select>                                   
                </span>
            </div>          
            <div> {{ (donorName && donorGroup) ? donorName +'s blood group is' + donorGroup : ''}} </div>
        </div>
    </body>
</html>
                </div>
    <script>
    angular.module('sortApp', [])

    .controller('mainController', function($scope) {

    });
    </script> 

    </body>
    </html>

基于条件的表达式

Expression based on a condition

expression

ternary-operator

angularjs