Question

如果其他两个字段不为空，我只想执行此功能，不知道如何操作。

if (value == 10)

HTML

ng-click="saveToList($event)"

app.js

  <div class="col-xs-5">
              <label for="exampleInputPassword1">Enter a Title/Description</label>
                <input type="text" id="urlName" class="form-control" placeholder=""  ng-model="mvName" />
            </div>
            <div class="col-xs-5">
                <label for="exampleInputPassword1">Enter a URL</label>
                <input type="text" id="urlLink" class="form-control" placeholder=""  ng-model="mvUrl" />
          </div>
          <div class="col-xs-2">
              <a href="javascript:" ng-click="saveToList($event)" class="btn btn-block post">Post</a>
          </div>

当它们为空时我收到此错误：

$scope.saveToList = function(event) {

    var mvName = $scope.mvName.trim();
    var mvUrl = $scope.mvUrl.trim();

    if (mvName.length > 0) {
      $scope.favUrls.$add({
        name: mvName,
        title: mvUrl
      });
        urlName.value = ''; //urlName is the ID of  input box - Angular rocks!
      urlLink.value = ''; //urlName is the ID of  input box - Angular rocks!
    }

}

Answer 1

问题与Angular无关：.trim()不适用于未定义的值。在尝试修剪变量之前检查变量是否已定义，例如：

var mvName = ($scope.mvName) ? $scope.mvName.trim() : '' ;

Answer 2

您可以将ng-disabled指令添加到标签中。像这样：

<a href ng-disabled="!mvName || !mvUrl" ng-click="saveToList($event)" class="btn btn-block post">Post</a>

或检查js中的变量：

$scope.saveToList = function(event) {
   if(!$scope.mvName || !$scope.mvUrl)
      return;

    var mvName = $scope.mvName.trim();
    var mvUrl = $scope.mvUrl.trim();
...

Answer 3

您应该在控制器中初始化$scope.mvName！由于它是空的，因此您在第var mvName = $scope.mvName.trim();行

时收到错误消息

修改

<a href="javascript:" ng-click="(!mvName && !mvUrl) ? saveToList($event) : ''" class="btn btn-block post">Post</a>

Answer 4

你可以这样做：

<div class="col-xs-5">
  <label for="exampleInputPassword1">Enter a Title/Description</label>
    <input type="text" id="urlName" class="form-control" placeholder=""  ng-model="mvName" />
</div>
<div class="col-xs-5">
    <label for="exampleInputPassword1">Enter a URL</label>
    <input type="text" id="urlLink" class="form-control" placeholder=""  ng-model="mvUrl" />
</div>
<div class="col-xs-2">
  <a href="javascript:" 
    ng-click="(mvName != '' && mvUrl != '') && saveToList($event)" class="btn btn-block post">Post</a>
</div>

或使用ng-disabled="mvName === '' && mvUrl === ''"

其他选项是不呈现按钮：ng-if或ng-show。

Answer 5

    <form name="myForm">
      <div class="col-xs-5">
        <label for="exampleInputPassword1">Enter a Title/Description</label>
        <input type="text" id="urlName" required class="form-control" placeholder=""  ng-model="mvName" />
      </div>
      <div class="col-xs-5">
        <label for="exampleInputPassword1">Enter a URL</label>
        <input type="text" id="urlLink" required class="form-control" placeholder=""  ng-model="mvUrl" />
      </div>
      <div class="col-xs-2">
        <a href="javascript:" ng-enabled="myForm.$valid" ng-click="saveToList($event)" class="btn btn-block post">Post</a>
      </div>    
    </form>

尝试使用角度验证。

Answer 6

在使用该值执行任何比较之前，如何执行简单检查以查看字段是否为空。这应该解决我认为的问题。

如果输入字段不为空，则仅使用ng-click执行函数

6 个答案: