HTML页面
<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ristorante Con Fusion: Contact Us</title>
<!-- Bootstrap -->
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body>
<div class="container" ng-controller="ContactController">
<div class="row">
<div class="col-xs-12">
<ul class="breadcrumb">
<li>
<a href="#">Home</a>
</li>
<li class="active">Contact Us</li>
</ul>
</div>
<div class="col-xs-12">
<h3>Contact Us</h3>
<hr>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12">
<h3>Location Information</h3>
</div>
<div class="col-xs-12 col-sm-4 col-sm-offset-1">
<h5>Our Address</h5>
<address style="font-size: 100%">
121, Clear Water Bay Road
<br> Clear Water Bay, Kowloon
<br> HONG KONG
<br>
<i class="fa fa-phone"></i>: +852 1234 5678
<br>
<i class="fa fa-fax"></i>: +852 8765 4321
<br>
<i class="fa fa-envelope"></i>:
<a href="mailto:confusion@food.net">confusion@food.net</a>
</address>
</div>
<div class="col-xs-12 col-sm-6 col-sm-offset-1">
<h5>Map of our Location</h5>
</div>
<div class="col-xs-12 col-sm-11 col-sm-offset-1">
<div class="btn-group" role="group" aria-label="...">
<a type="button" class="btn btn-primary" href="tel:+85212345678">
<i class="fa fa-phone"></i> Call</a>
<a type="button" class="btn btn-info">
<i class="fa fa-skype"></i> Skype</a>
<a type="button" class="btn btn-success" href="mailto:confusion@food.net">
<i class="fa fa-envelope-o"></i> Email</a>
</div>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12">
<h3>Send us your Feedback</h3>
</div>
<div class="col-xs-12 col-sm-9" ng-controller="FeedbackController">
<form class="form-horizontal" name="feedbackForm" ng-submit="sendFeedback()" novalidate>
<div class="form-group" ng-class="{ 'has-error' : feedbackForm.firstname.$error.required && !feedbackForm.firstname.$pristine }">
<label for="firstname" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="Enter First Name" ng-model="feedback.firstName"
required>
<span ng-show="feedbackForm.firstname.$error.required && !feedbackForm.firstname.$pristine" class="help-block">Your First name is required.</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : feedbackForm.lastname.$error.required && !feedbackForm.lastname.$pristine }">
<label for="lastname" class="col-sm-2 control-label">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Enter Last Name" ng-model="feedback.lastName"
required>
<span ng-show="feedbackForm.lastname.$error.required && !feedbackForm.lastname.$pristine" class="help-block">Your Last name is required.</span>
</div>
</div>
<div class="form-group">
<label for="telnum" class="col-sm-2 control-label">Contact Tel.</label>
<div class="col-xs-5 col-sm-4 col-md-3">
<div class="input-group">
<div class="input-group-addon">(</div>
<input type="tel" class="form-control" placeholder="Area code" ng-model="feedback.tel.areaCode">
<div class="input-group-addon">)</div>
</div>
</div>
<div class="col-xs-7 col-sm-6 col-md-7">
<input type="tel" class="form-control" id="telnum" name="telnum" placeholder="Tel. number" ng-model="feedback.tel.number">
</div>
</div>
<div class="form-group" ng-class="{ 'has-error has-feedback' : feedbackForm.emailid.$invalid && !feedbackForm.emailid.$pristine }">
<label for="emailid" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="emailid" name="emailid" placeholder="Email" ng-model="feedback.email" required>
<span ng-show="feedbackForm.emailid.$invalid && !feedbackForm.emailid.$pristine" class="glyphicon glyphicon-remove form-control-feedback"
aria-hidden="true"></span>
<span ng-show="(feedbackForm.emailid.$invalid ||
feedbackForm.emailid.$error.required) &&
!feedbackForm.emailid.$pristine" class="help-block">Enter a valid email address.</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : invalidChannelSelection }">
<div class="checkbox col-sm-5 col-sm-offset-2">
<label class="checkbox-inline">
<input type="checkbox" ng-model="feedback.agree">
<strong>May we contact you?</strong>
</label>
</div>
<div class="col-sm-3 col-sm-offset-1" ng-show="feedback.agree">
<select class="form-control" ng-model="feedback.mychannel" ng-options="channel.value as channel.label for channel in channels">
<option value="">Tel. or Email?</option>
</select>
<span ng-show="invalidChannelSelection" class="help-block">Select an option.</span>
</div>
</div>
<div class="form-group">
<label for="feedback" class="col-sm-2 control-label">Your Feedback</label>
<div class="col-sm-10">
<textarea class="form-control" rows="12" ng-model="feedback.comments">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="feedbackForm.$invalid">Send Feedback</button>
</div>
</div>
</form>
</div>
<div class="col-xs-12 col-sm-3">
<h3>Your Current Feedback:</h3>
<p>{{feedback.firstName}} {{feedback.lastName | uppercase }}</p>
<p>Contact Tel.: ({{feedback.tel.areaCode}}) {{feedback.tel.number}}</p>
<p>Contact Email: {{feedback.email}}</p>
<p ng-show="feedback.agree">Contact by: {{feedback.mychannel}}</p>
<p>Comments: {{feedback.comments}}</p>
</div>
</div>
</div>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="scripts/app.js"></script>
<!-- endbuild -->
</body>
</html>
app.js文件
'use strict';
angular.module('confusionApp', [])
.controller('MenuController', ['$scope', function ($scope) {
$scope.tab = 1;
$scope.filtText = '';
$scope.showDetails = false;
$scope.dishes = [{
name: 'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
label: 'Hot',
price: '4.99',
description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comment: ''
},
{
name: 'Zucchipakoda',
image: 'images/zucchipakoda.png',
category: 'appetizer',
label: '',
price: '1.99',
description: 'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
comment: ''
},
{
name: 'Vadonut',
image: 'images/vadonut.png',
category: 'appetizer',
label: 'New',
price: '1.99',
description: 'A quintessential ConFusion experience, is it a vada or is it a donut?',
comment: ''
},
{
name: 'ElaiCheese Cake',
image: 'images/elaicheesecake.png',
category: 'dessert',
label: '',
price: '2.99',
description: 'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
comment: ''
}
];
$scope.select = function (setTab) {
$scope.tab = setTab;
if (setTab === 2) {
$scope.filtText = "appetizer";
} else if (setTab === 3) {
$scope.filtText = "mains";
} else if (setTab === 4) {
$scope.filtText = "dessert";
} else {
$scope.filtText = "";
}
};
$scope.isSelected = function (checkTab) {
return ($scope.tab === checkTab);
};
$scope.toggleDetails = function () {
$scope.showDetails = !$scope.showDetails;
};
}])
.controller('ContactController', ['$scope', function ($scope) {
$scope.feedback = {
mychannel: "",
firstName: "",
lastName: "",
agree: false,
email: ""
};
var channels = [{
value: "tel",
label: "Tel."
}, {
value: "Email",
label: "Email"
}];
$scope.channels = channels;
$scope.invalidChannelSelection = false;
}])
.controller('FeedbackController', ['$scope', function ($scope) {
$scope.sendFeedback = function () {
console.log($scope.feedback);
if ($scope.feedback.agree && ($scope.feedback.mychannel === "") && !$scope.feedback.mychannel) {
$scope.invalidChannelSelection = true;
console.log('incorrect');
} else {
$scope.invalidChannelSelection = false;
$scope.feedback = {
mychannel: "",
firstName: "",
lastName: "",
agree: false,
email: ""
};
$scope.feedback.mychannel = "";
$scope.feedbackForm.$setPristine();
console.log($scope.feedback);
}
};
}]);
请帮助修改代码。当我选中复选框时，我在HTML Web应用程序中看到一个额外的空选项＆＃34;我们可以联系您吗？＆＃34;。相反，我需要只有3个选项而没有第一个选项是空的。请解决问题。提前谢谢。
This is the output which I got This should be the actual output
答案 0 :(得分：0)
更改
<select class="form-control" ng-model="feedback.mychannel" ng-options="channel.value as channel.label for channel in channels">
<option value="">Tel. or Email?</option>
</select>
要
<select class="form-control" ng-model="feedback.mychannel" ng-options="channel.value as channel.label for channel in channels" ng-init="feedback.mychannel =channels[0].value">
</select>
并设置类似
的频道 $scope.channels = [{
value: "",
label: "Tel. or Email"
},{
value: "tel",
label: "Tel."
}, {
value: "Email",
label: "Email"
}];