将带有ng-options的select转换为常规 <p> 与ng-repeat

Question

Probably an Angular newbie question.

I have a HTML select tag to display when there is more than 1 option to provide to the user, but when there is only one option, I need to set a regular <p> , so the user may not be able to see any dropdown/select.

this the select in html

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

with the select everything is ok

here what I have in the controller

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

the problem comes when I try to set that in a single 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>

so, what should I do to reproduce my select but in a single p so the user has no options to select.

EDIT

BTW, if I do this

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

or something similar, what I look printed in the DOM is this

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

Answer 1

I think you can simplify this. Just check the length of your options data with ng-if to show or hide the select box and the paragraph. In your controller, if the length of the options data is 1, then set the 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>

You don't need ng-model in the paragraph because you are setting that value in the controller if there is only one option.

Below is a working plunk to illustrate the idea (the data is different, but the concept is the same).

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

Answer 2

I've been following your app due to the questions you made before, and I have something here for you:

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

and then in currentLine you should put something like .pick or I guess .team , isn't it ?