Question

用户可以看到一个选项列表（例如：1.Apple; 2.Banana; 3.Mango）。有一个文本框，其中用户在所需选项中键入并单击发送以继续进行。

现有设置：

HTML：

<p ng-repeat="opt in objHistory.OptionItems track by $index">
  {{ opt.SortOrder }}. {{ opt.OptionName }}
</p>
<textarea ng-model="userInput"></textarea>
<a href="javascript:;" ng-click="GetNextItem()">Send</a>

JS：

$scope.GetNextItem = function () {
  alert($scope.userInput);
  //some code
}

上面的代码运行良好。但是现在我已经将选项更改为锚标签，因此用户可以点击它们，而不是键入，然后是相同的流程。

新HTML：

<p ng-repeat="opt in objHistory.OptionItems track by $index">
  <a href="javascript:;" 
  ng-model = "userInput"
  ng-init="userInput=opt.SortOrder" 
  ng-click="GetNextItem()">{{ opt.SortOrder }}. {{ opt.OptionName }}
  </a>
</p>

我现在在警报中获得undefined。我哪里错了？是否可以多次使用相同的ng-model变量名称（我将其用于textbox以及anchor标记）？

Answer 1

除非您有输入字段或自定义指令，否则

ng-model不能用于锚标记。根据文件：

ngModel指令使用input将select，textarea，NgModelController（或自定义表单控件）绑定到作用域上的属性，这是ngModel由该指令创建和公开。

为什么在锚标记上使用{{1}}？

对不起，没有足够的代表发表评论

Answer 2

您正在尝试在Angular完成分配之前读取设定值。

HTML：

<p ng-repeat="opt in objHistory.OptionItems track by $index">
  <a href="javascript:;" 
  ng-model = "userInput"
  ng-init="init(opt)" 
  ng-click="GetNextItem()">{{ opt.SortOrder }}. {{ opt.OptionName }}
  </a>
</p>
<textarea ng-model="userInput"></textarea>

控制器：

angular.module("app",[]).controller("MainController", function($scope) {

  $scope.GetNextItem = function () {
  alert($scope.userInput);
  //some code
};

  $scope.init = function(opt) {
    $scope.userInput = opt.SortOrder; // set it in the init method
  };
  $scope.objHistory = {
    OptionItems: [{
      SortOrder : "1",
      OptionName: "Hi"

    }, {
      SortOrder : "2",
      OptionName: "Hi"

    }]
  }
});

<强> Working DEMO

根据评论更新：

 $scope.GetNextItem = function (opt) {
  $scope.userInput = opt.SortOrder;
  //some code
 };

现在在您的HTML中：

<p ng-repeat="opt in objHistory.OptionItems track by $index">
  <a href="javascript:;" 
  ng-click="GetNextItem(opt)">{{ opt.SortOrder }}. {{ opt.OptionName }}
  </a>
</p>

Answer 3

将ng-model移至父<p>

为锚标记赋值 - angularjs

3 个答案: