ng-options Значение по умолчанию для углового раскрывающегося списка

Question

У меня есть два выпадающих списка, один зависит от другого. У меня изначально был код, использующий ng-repeat, но я читал, что более эффективно использовать ng-options. Однако при переключении я больше не могу использовать ng-selected для значения по умолчанию.

Я смотрел на различные методы установки опции по умолчанию в ng-options, но они используют либо <option value="">Select Something Here</option> для индивидуального варианта или выбора прямо из набора данных. Однако моя ценность будет меняться.

Вот плункер, который по умолчанию не использует ng-option:

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

У меня контроллер вот так:

      <select ng-model="defcom"
        ng-options="opt as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >
      </select>
       <p>Hello {{ defcom.AcctName }}</p>

и пример моих данных:

$scope.acct_info = [
      {
        "Req": "MUST",
        "DefCom": "1",
        "AcctName": "ThisName"
      },
      {
        "Req": "NoMUST",
        "DefCom": "5",
        "AcctName": "ThisName2"
      },
      {
        "Req": "MUST",
        "DefCom": "4",
        "AcctName": "ThisName3"
      },
      {
        "Req": "MUST",
        "DefCom": "7",
        "AcctName": "ThisName4"
      }
    ];

У меня было это работает, когда я использовал ng-options="opt.DefCom as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" как видно здесь: http://plnkr.co/edit/vyJuZDM7OvE5knsfHln7?p=preview но я изменил его, чтобы получить связанные привязки. Если у кого-то есть понимание того, как работает ng-options, это было бы очень полезно.

Answer 1

ng-options="opt as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true"

Значение привязано к ng-model="defcom" будет целый объект opt, Чтобы установить значение по умолчанию, вам нужно назначить весь объект $scope.defcom, например $scope.defCom = $scope.acct_info[2];

С вашими текущими данными, это сделает по умолчанию

{
  "Req": "MUST",
  "DefCom": "4",
  "AcctName": "ThisName3"
}

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

$scope.defcom = getAccountByDefCom("4");
$scope.defcust = getCustomer("3");

function getAccountByDefCom(defcom) {
  for (var i = 0; i < $scope.acct_info.length; i++) {
    if ($scope.acct_info[i].DefCom === defcom) {
      return $scope.acct_info[i];
    }
  }
}

function getCustomer(number) {
  for (var i = 0; i < $scope.cust_info.length; i++) {
    if ($scope.cust_info[i].Customer === number) {
      return $scope.cust_info[i];
    }
  }
}

Пример Плункер

Просмотр раздела " Аргументы " документации может помочь