Question

可能是一个Angular新手问题。

当有超过1个选项提供给用户时，我会显示一个HTML select标记，但是当只有一个选项时，我需要设置一个常规<p>，所以用户可能无法看到任何下拉/选择。

这是html中的select

<select class="points-selection" ng-if="!noDropdown"
        ng-init="currentLine = getCurrentLine(slip)"
        ng-model="currentLine"
        ng-options="line as line.pick for line in slip.lines"
        ng-change="updateSelectionLine(slip, currentLine.pointsBought)">
</select>

选择一切正常

这里我在控制器中有什么

$scope.getCurrentLine = function(slip) {
  console.log(slip.lines.length);
  $scope.noDropdown = false;
  if (slip.lines.length === 1) {
    $scope.noDropdown = true
  };
  var lineSelected = _.find(slip.lines, function(line) {
    return line.isSelected === '1';
  });
  if (!lineSelected && slip.lines) {
    lineSelected = slip.lines[0];
  }
  return lineSelected;
};

当我尝试在单p

中设置问题时，问题出现了

  <p ng-if="noDropdown"
       ng-init="currentLine = getCurrentLine(slip)"
       ng-model="currentLine"
       ng-repeat="line in slip.lines"
       ng-change="updateSelectionLine(slip, currentLine.pointsBought)">{{currentLine}}
  </p>

所以，我该怎么做才能重现我的select，但只需一个p，这样用户就无法选择。

修改

顺便说一句，如果我这样做

<p ng-if="noDropdown"
   ng-init="currentLine = getCurrentLine(slip)">{{currentLine}}
</p>

或类似的东西，我在DOM中看到的是这个

{"spread":"5","moneyLine":"-140","pointsBought":"0","isSelected":"0"}

Answer 1

我认为你可以简化这个。只需使用ng-if检查选项数据的长度，即可显示或隐藏选择框和段落。在控制器中，如果选项数据的长度为1，则设置currentLine。

<select class="points-selection" ng-if="slip.lines.length!==1"
        ng-model="currentLine"
        ng-options="line as line.pick for line in slip.lines">
</select>

 <p ng-if="slip.lines.length===1">
    {{currentLine}}
  </p>

如果只有一个选项，您在段落中不需要ng-model，因为您在控制器中设置了该值。

下面是一个说明这个想法的工作插图（数据不同，但概念是相同的）。

http://plnkr.co/edit/mN6BG6skUxX4yHHbBIn6?p=preview

Answer 2

由于您之前提出的问题，我一直关注您的应用，我在这里为您提供了一些内容：

                  <p class="points-p"
                     ng-if="noDropdown"
                     ng-init="currentLine = getCurrentLine(slip)">
                      {{currentLine.pick}}
                  </p>

然后在currentLine中，您应该添加.pick或我猜.team之类的内容，不是吗？

使用ng-options将选项翻译为常规<p>和ng-repeat

2 个答案: