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>'s blood group is <donorGroup>和donorName都不为空时，我希望将其显示为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>
    <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>

Answer 3

<!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>

工作代码段

基于条件的表达

3 个答案: