AngularJS 1.6表单取值问题：值匹配但选项未选中求助

Hey there! Let's dig into why your select option isn't getting selected even though Cat.spec_value = 1 and editEventUser.cat_id = 1 seem to match. This is a super common gotcha in AngularJS, so let's break down the most likely causes:

1. Type Mismatch (The #1 Culprit!) #

AngularJS uses strict equality (===) to match select values. That means even if the numeric values are identical, if one's a number and the other's a string, they won't register as a match. For example:

• If Cat.spec_value is a number (1) but editEventUser.cat_id is a string ("1"), AngularJS won't see them as equal.

Fix:
Make sure both values share the same type. You can convert the string to a number when setting editEventUser.cat_id:

// Convert string to integer
editEventUser.cat_id = parseInt(editEventUser.cat_id, 10);
// Or use Number() for broader numeric conversion
editEventUser.cat_id = Number(editEventUser.cat_id);

Alternatively, adjust your backend to return cat_id as a number instead of a string.

2. Incorrect ng-options or ng-repeat Syntax #

Double-check how you're rendering your select options — a tiny syntax mistake can break the matching logic:

If using ng-options: #

Ensure you're mapping the correct property to your model. The proper syntax for binding to spec_value should look like this:

<select ng-model="editEventUser.cat_id" 
        ng-options="cat.spec_value as cat.name for cat in cats">
</select>

Here, cat.spec_value is the value bound to editEventUser.cat_id, and cat.name is the visible label. Swapping these or using the wrong property will prevent a match.

If using ng-repeat for options: #

Avoid the plain value attribute (which converts all values to strings) — use ng-value instead to preserve the original data type:

<select ng-model="editEventUser.cat_id">
  <option ng-repeat="cat in cats" ng-value="cat.spec_value">
    {{cat.name}}
  </option>
</select>

3. Data Initialization Timing #

If editEventUser.cat_id is set before the cats array (your list of Cat objects) finishes loading, AngularJS might not update the select once the options become available.

Fix:
Only set editEventUser.cat_id after your cats data is fully loaded. For example, if fetching data via an API:

$http.get('/api/cats').then(function(response) {
  $scope.cats = response.data;
  // Assign cat_id only after cats are loaded
  $scope.editEventUser.cat_id = 1;
});

If you're dealing with a digest cycle quirk, wrap the assignment in $timeout to ensure it runs after the DOM updates:

$timeout(function() {
  $scope.editEventUser.cat_id = 1;
});

Quick Debugging Tip #

Open your browser's dev tools console and run these lines to spot discrepancies:

console.log('Cat.spec_value type:', typeof Cat.spec_value);
console.log('editEventUser.cat_id type:', typeof editEventUser.cat_id);
console.log('Strictly equal?', Cat.spec_value === editEventUser.cat_id);

If the last line returns false, you've found your issue!

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