AngularJS 1.4: выберите значение списка, не инициализируя корректно, когда список вставляется с компиляцией $

Вот краткая справочная информация. Я просто обновился до Angular 1.4. Я использую API, написанный на С# для вызовов на стороне сервера.

В разделе моей страницы отображается 2 списка выбора (Project и Sub-project). Оба должны иметь значение по умолчанию "(Выбрать ______)", который я перечисляю как первый вариант для каждого выбора с "значением" 0. Соответствующие переменные ng-модели инициализируются на 0.

Фактический HTML-код для списков выбора генерируется на стороне сервера с помощью конкатенации строк, передается клиенту через $http и вставляется с помощью директивы, которая вызывает компиляцию $(не идеально, но у моего клиента довольно много приковал меня к этому API). До обновления 1.4 все работало красиво.

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

<select ng-change="updateSubProjList()" ng-model="curProjID">
    <option value="? number:0 ?"></option>
    <option value="0">(Select a Project)</option>
    <option value="1">First Project</option>
    <option value="2">Second Project</option>
    ...
</select>

... с этим первым "? числом: 0?" который будет выбран в настоящее время. Мой список выбора подпроектов все еще инициализируется просто отлично, что делает его еще более странным.

Я знаю, что в обновлении для AngularJS 1.4 появились обновления для компиляции $, но я не могу найти решение моей проблемы. Любая помощь будет принята с благодарностью.

Ответы

Ответ 1

Кажется, что в версии 1.4 произошло изменение, связанное с тем, как выбранный параметр сопоставляется с ngModel путем сравнения атрибута value в <option value="0"> - теперь ему требуется явно использовать строку для соответствия, а не разрешать целое число.

Фактически в документации четко указано:

Значение директивы select, используемой без ngOptions, всегда является строкой. Когда модель должна быть привязана к нестрочному значению, вы должны либо явно преобразовать ее с помощью директивы... или использовать ngOptions для указания набора параметров.

Чтобы исправить, измените инициализированное значение $scope.curProjID как строку:

$scope.curProjID = "0"; // instead of $scope.curProjID = 0;

Если совпадения нет (и нет, если вы не назначили строку "0"), select добавляет опцию "unknown": <option value="? number:0 ?"></option>.

Ответ 2

Есть и другой способ: использовать директиву, реализующую синтаксический анализатор и форматировщик. См. http://plnkr.co/edit/JZPay8jgm5AXKGXDCjSb

thankx отправляется на narretz!

Псевдокод:

<select convert-number ng-model="x">
   <option value="100">100</option>
   <option value="200">200</option>
</select>


app.directive('convertNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ctrl) {
      ctrl.$parsers.push(function(value) {
        return parseInt(value, 10);
      });

      ctrl.$formatters.push(function(value) {
        return value.toString();
      });      
    }
  }
});

Ответ 3

У меня была такая же проблема. Вместо того чтобы убедиться, что мой код JavaScript использует строку повсюду, я сделал следующее:

Удалены элементы <option ...> из файла HTML

Введен список в JavaScript, похожий на:

var orderQuantities = [
        { id: 100, text: '100' },
        { id: 200, text: '200' },
        { id: 300, text: '300' },
];

Убедитесь, что orderQuantities отображается в области

Используется ng-option в теге select следующим образом:

<select ng-model="vm.entity.OrderQuantity" ng-options="orderQuantity.id as orderQuantity.text for orderQuantity in vm.orderQuantities"></select>

Ответ 4

<select ng-model="x">
   <option value="100">100</option>
   <option value="200">200</option>
</select>

scope.x = '200'

или прочитайте этот документ. https://docs.angularjs.org/guide/migration