为锚点标记angularjs赋值

Question

用户看到一个选项列表（例如：1.苹果；2.香蕉；3.芒果）。有一个文本框，用户在其中键入所需选项，然后单击发送以继续操作。

现有设置：

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指令使用由该指令创建和公开的NgModelController将input、select、textarea（或自定义表单控件）绑定到作用域上的属性。

为什么在锚点标签上使用ngModel？

抱歉没有足够的代表评论

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"
    }]
  }
});

工作演示

根据评论更新：

 $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>