1

我目前正在使用 angularjs 的 ng-href 和一个带有 ng-model 的 select html 元素，我使用 ng-href 链接到“selectedItem”（来自 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

4

2 回答 2

1

您只需要添加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

于 2015-07-22T15:00:23.123 回答
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

于 2015-07-22T14:54:48.497 回答