Question

HTML页面上有一个锚标记和一个选择下拉列表，下拉列表绑定到angularjs控制器的范围变量。

功能：每当下拉列表的选定值发生变化时，它应该反映在锚标记文本中。

问题：首次初始化控制器时，下拉列表中的值会设置，但标签的文本不会被填充。

以下是代码：

角度代码：在AController.js

init = function() {
  $scope.month = {'val': ''}; 
  // some intermediate code which populates month

  $("#element-id").val($scope.month.val);

  var i = $("#element-id").closest(".element-panel");
  var t = i.find(".element-label");
  t.text(element.children(":selected").text());
}

init();

HTML页面：

<div class="element-panel">
  <a class="select-label element-label" id="">Month</a>
  <select id="element-id" ng-model="month.val">
    <option value="" style="display:none;"></option> 
    <option value="1">January</option>
    <option value="2">February</option>
        <!-- more options ... -->
    <option value="12">December</option>
  </select>
</div>

Answer 1

$("#element-id").val应该是不必要的，因为您已经将其与HTML中的ng-model="month.val"绑定。

为什么不将标签更改为

<a class="select-label element-label">{{month.val}}</a>

哪个应该为你做绑定？最好的做法是避免像控制器一样操纵控制器中的DOM。不过你可以使用指令。

Answer 2

HTML code，

    <a>{{monthName}}</a>
    <select ng-model="month.val" ng-options="month.Id as month.Name for month in months track by month.Id"
        ng-change="GetValue()">
    </select>

Angula JS代码，

            $scope.months = [{
                Id: 1,
                Name: 'jan'
            }, {
                Id: 2,
                Name: 'feb'
            }, {
                Id: 3,
                Name: 'mar'
            }];

            $scope.GetValue = function (fruit) {
                $scope.monthId = $scope.month.val;
                $scope.monthName = $.grep($scope.months, function (month) {
                    return month.Id == $scope.monthId;
                })[0].Name;

            }

month.val包含所选的月份ID。

在选项选择getValue上调用函数。

此功能根据$scope.months的月份ID查找月份名称。试试这个。

Answer 3

这是一个有效的fiddle。

HTML：

<a class="select-label element-label" ng-model="label">{{selected.label}}</a>
<select id="element-id" ng-model="selected" ng-options="opt.label for opt in months">

控制器：

$scope.months = [
    {id: '1', label: "January"},
    {id: '2', label: "February"},
    {id: '3', label: "December"}
];
$scope.selected = {label: 'Month'};

避免在控制器中使用jQuery。 DOM操作应该在别处处理（指令等）。

无法从角度控制器更新标签文本

3 个答案: