Изменение параметра не отображает метку/текст опции в AngularJS

Question

У меня есть выпадающее меню, и я заполняю его массивом объектов. Я также назначаю значение по умолчанию для него, чтобы по умолчанию был выбран конкретный параметр. Когда я изменяю параметр на что-то еще, значение параметра изменяется (вы можете видеть это в пред-теге), но метка/текст опции не отображается. Если я попытаюсь выбрать еще один вариант сейчас, он выбирает опцию & также правильно заполняет ее метку/текст.

ВОПРОС:

Таким образом, после загрузки страницы, при изменении выбора параметра на другое значение, метка/текст не заполняет. Как исправить это, чтобы правильно отображалась соответствующая метка?

Вот весь мой код:

angular.module('myApp', []) 
 
    .controller('TodoCtrl', TodoCtrl); 
 

 
function TodoCtrl($scope, $window) { 
 
    $scope.fieldObj = {}; 
 
    $scope.allMembers = [{ 
 
    "member_id": "1", 
 
    "firstname": "a" 
 
    }, { 
 
    "member_id": "2", 
 
    "firstname": "b" 
 
    }, { 
 
    "member_id": "3", 
 
    "firstname": "c" 
 
    }, { 
 
    "member_id": "4", 
 
    "firstname": "d" 
 
    }, { 
 
    "member_id": "5", 
 
    "firstname": "e" 
 
    }, { 
 
    "member_id": "6", 
 
    "firstname": "f" 
 
    }]; 
 

 
    $scope.allMembers.unshift({ 
 
    member_id: "new", 
 
    firstname: "Add New" 
 
    }); 
 
    $scope.fieldObj.firstName = {}; 
 
    $scope.fieldObj.firstName = { 
 
    "member_id": "3", 
 
    "firstname": "c" 
 
    }; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js" rel="script"></script> 
 
<div ng-app="myApp" class="container"> 
 
    <h2>Todo</h2> 
 

 
    <div ng-controller="TodoCtrl"> 
 

 
    <select ng-model="fieldObj.firstName" ng-options="member.member_id as member.firstname for member in allMembers track by member.member_id"> 
 
     <option value=""></option> 
 
    </select> 
 

 
    <pre> 
 
      {{fieldObj.firstName | json}} 
 
      {{message}} 
 
     </pre> 
 

 
    <div ng-if="fieldObj.firstName === 'new'">New option was selected</div> 
 

 
    </div> 
 
</div>

Answer 1

Вы назначаете fieldObj.firstName объекту, который содержит как firstName, так и memberId, но я предполагаю, что вы пытаетесь назначить весь объект, а не одно из полей в нем (firstName).

Попробуйте упростить ваши ngOptions и все должно работать:

angular.module('myApp', []) 
 
    .controller('TodoCtrl', TodoCtrl); 
 

 
function TodoCtrl($scope, $window) { 
 
    $scope.fieldObj = {}; 
 
    $scope.allMembers = [{ 
 
    "member_id": "1", 
 
    "firstname": "a" 
 
    }, { 
 
    "member_id": "2", 
 
    "firstname": "b" 
 
    }, { 
 
    "member_id": "3", 
 
    "firstname": "c" 
 
    }, { 
 
    "member_id": "4", 
 
    "firstname": "d" 
 
    }, { 
 
    "member_id": "5", 
 
    "firstname": "e" 
 
    }, { 
 
    "member_id": "6", 
 
    "firstname": "f" 
 
    }]; 
 

 
    $scope.allMembers.unshift({ 
 
    member_id: "new", 
 
    firstname: "Add New" 
 
    }); 
 
    $scope.fieldObj = $scope.allMembers[2]; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js" rel="script"></script> 
 
<div ng-app="myApp" class="container"> 
 
    <h2>Todo</h2> 
 

 
    <div ng-controller="TodoCtrl"> 
 

 
    <select ng-model="fieldObj" ng-options="member.firstname for member in allMembers track by member.member_id"> 
 
     <option value=""></option> 
 
    </select> 
 

 
    <pre> 
 
      {{fieldObj.firstName | json}} 
 
      {{message}} 
 
     </pre> 
 

 
    <div ng-if="fieldObj.firstName === 'new'">New option was selected</div> 
 

 
    </div> 
 
</div>

Answer 2

Я считаю, что проблема вызвана тем, как выбрать и отслеживать выражения в одном элементе; Вы можете это исправить, удалив «.memberId» от выбора части нг-опций, т.е .:

<select ng-model="fieldObj.firstName" ng-options="member as member.firstname for member in allMembers track by member.member_id"> 

Посмотрите this codepen для примера; Я также немного изменил часть вашего кода, например. последняя строка, в которой вы назначали объект fieldObj.firstName, а не самому fieldObj.

Посмотрите раздел «выберите как» https://docs.angularjs.org/api/ng/directive/ngOptions, что объясняет проблему более подробно.

Answer 3

Это plunkr решает вашу проблему: https://plnkr.co/edit/wij2MyHpgKVQndx4pawB?p=preview

Проблема заключается в том, что вы установите выбор-х нг-модель to fieldObj.firstName при установке значения по умолчанию с шаблоном объекта-члена.

Попробуйте использовать fieldObj непосредственно в нг-модели и предварительный выбор с помощью нг-INIT:

<select ng-init="fieldObj=allMembers[3]" ng-model="fieldObj" ng-options="member as member.firstname for member in allMembers track by member.member_id"> 
     <option value=""></option> 
</select> 

Кроме того, вы должны использовать чувствительные имена переменных и свойств регистра: Firstname в нижнем регистре в вашем JSON, но ГорбатыйРегистр в вашем шаблон.

Похожие: How to make a preselection for a select list generated by AngularJS?