Question

我目前正在使用angularjs的ng-href和一个带有ng-model的select html元素，我使用ng-href链接到＆＃34; selectedItem＆＃34; （来自ng-model）。当没有选择任何东西时我无法验证或提供错误，并且想知道我将如何做到这一点。我的ng-href工作，我认为它在Plunker上没有相同的功能。

继承我的HTML代码：

 <form name="linkForm" ng-controller="MainCtrl">
  <select name="link" ng-model="selectedItem" 
      ng-options="item as item.name for item in items"></select>
      <option value=""></option>  
      <span class="error" ng-show="linkForm.link.$dirty && linkForm.link.$invalid">Please select a website</span>    
  <a ng-href="{{selectedItem.id}}">Let's go</a>
 </form>

继承我的angularjs代码

var app = angular.module('angularjs-starter', []);

 app.controller('MainCtrl', function($scope) {
 $scope.items = [
{ id: 'http://www.google.com', name: 'Google'},
{ id: 'http://www.gmail.com', name: 'Gmail'}];
  });

继承我的演示： http://plnkr.co/edit/c9iiLP6spvQK8jYdmYhD?p=preview

Answer 1

您可以使用ng-click代替链接并在控制器中处理验证。

  $scope.go = function() {
      if (!$scope.selectedItem) {
        alert("You have to select")
      } else {
        window.location.href = $scope.selectedItem.id;
      }
  }

在视图中：

  <a ng-click="go()">Let's go</a>

以下是更新后的代码http://plnkr.co/edit/CLwFsNIUgt7PPRA3f4HA?p=preview

Answer 2

您只需要将required添加到选择中，以便为验证提供必要的选项。但是，您还需要删除对bankLoginForm.bankLogin.$dirty的检查，因为在用户修改下拉列表之前它不会变脏。要在下拉列表无效时使href消失，您可以在其上添加相反的检查。

<select name="bankLogin" ng-model="selectedItem" 
          ng-options="item as item.name for item in items" required>
          <option value=""></option>  </select>
              <span ng-show="bankLoginForm.bankLogin.$invalid">Select bank</span>
    <a ng-href="{{selectedItem.id}}" ng-show="!bankLoginForm.bankLogin.$invalid">Let's go</a>

http://plnkr.co/edit/JFvvXslCZf9CnHCB0zRT?p=preview

使用ng-href进行下拉/选择重定向的Angularjs错误验证

2 个答案: