AngularJS模板下拉列表不显示问题求助及ng-options底层咨询

Hey there! Let's dig into why your dropdown isn't showing options even though $scope.bTargets has data, and break down how ng-options actually works under the hood.

First, Let's Rule Out Common Issues #

Before diving into internals, let's check the most likely culprits with your code:

1. Verify Your bTargets Structure in the Template #

Even if your controller says bTargets has data, confirm it's accessible and properly structured in the template. Add this line right above your <select> to debug:

<pre>{{ bTargets | json }}</pre>

This renders the raw JSON of bTargets—make sure every item has non-null/non-undefined ID and Text properties. If you see empty values or missing properties here, that's your root problem.

2. Check for Async Data Timing #

Looking at your controller code:

function setBranchTargets() {
  $scope.bTargets = $scope.branchTargets.filter(function (x) {
    return x.ID !== $scope.QuestionnaireItem.Id;
  });
}
setBranchTargets();

If $scope.branchTargets loads asynchronously (e.g., from an API call), setBranchTargets() runs immediately when the controller initializes—before branchTargets has any data. This leaves bTargets as an empty array, so the dropdown stays empty.

Fix this by adding a watcher to re-run setBranchTargets when branchTargets updates:

$scope.$watch('branchTargets', function(newBranchTargets) {
  if (newBranchTargets) { // Only run if we have valid data
    setBranchTargets();
  }
}, true); // The `true` enables deep watching for array/object changes

3. Confirm Controller Extension is Applied #

Make sure your surveybuilder.branching.rulesControllerExtender is properly registered and attached to the correct controller. If it's not being executed at all, bTargets will never be set.

How ng-options Works Under the Hood #

Your suspicion about the "alias mechanism" is worth exploring—here's exactly how AngularJS processes your ng-options expression:

Step 1: Expression Parsing #

Your expression:

ng-options="t.ID as t.Text for t in bTargets"

Angular breaks this into four core parts:

• Select value: t.ID → The value bound to ng-model="branchTargetID" when the option is selected.
• Label: t.Text → The visible text shown in the dropdown for each option.
• Item alias: t → A temporary, expression-scoped alias for each item in the array (this never pollutes your global $scope—so this isn't causing your issue).
• Data source: bTargets → The array Angular iterates over to build options.

Step 2: Dirty Value Tracking #

Angular sets up a watcher on the bTargets array. Every time the array changes (items added/removed, or deep changes to items), Angular triggers a re-render of the dropdown options.

Step 3: Option Generation #

For each item in bTargets:

1. Angular evaluates t.Text to get the display text, then creates an <option> element with that text.
2. It evaluates t.ID to get the value linked to branchTargetID.
3. If your ng-model (branchTargetID) has an initial value matching any t.ID, Angular automatically selects that option.

Step 4: Performance Optimizations #

Angular uses reference tracking (or track by if specified) to avoid re-creating the entire dropdown DOM every time bTargets changes. It only updates options that actually changed, keeping things efficient.

Why Your Alias Isn't the Problem #

The t alias in your ng-options is a local variable scoped only to the ng-options expression. It doesn't get added to $scope, and it doesn't interfere with any other variables in your controller or template. So this isn't causing your empty dropdown.

Final Checklist #

1. Use <pre>{{ bTargets | json }}</pre> to confirm bTargets has valid ID/Text properties in the template.
2. If branchTargets loads async, add the watcher to re-run setBranchTargets.
3. Verify your controller extension is being executed.

If you still run into issues, share the output of the <pre> debug line and we can narrow it down further!

内容的提问来源于stack exchange，提问作者andrewb