Я пытаюсь отобразить поле выбора с помощью директивы. Но мой вариант по умолчанию не отображается.

Я так делаю

<div>
    <select ng-init="userselected = vm.data[0]"
            ng-model="userselected"
            ng-options="option.name for option in vm.data">
    </select>
</div>

Вот мой код http://plnkr.co/edit/Q1e8u0okOa4looLcb2YO?p=preview

.controller('f',function($http){
        var l=this;
        $http.get('data.json').success(function(data){
          l.data=data;
        })
      })

Можем ли мы загрузить данные перед вызовом контроллера и загрузкой html-файла с помощью разрешения?

4
user944513 21 Дек 2015 в 10:17

5 ответов

Лучший ответ

Можем ли мы загрузить данные перед вызовом контроллера и загрузкой html-файла с помощью resol?

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

Я могу думать о трех путях от макушки головы;

  • UI - маршрутизатор # решительность .
  • ngRoute # решительность .
  • отложите компиляцию DOM, прикрепленной к вашему контроллеру.

UI - маршрутизатор # Решимость

// state definition
.state('myState', function () {
  resolve: {
    dataset: function (Service) {
      return Service.getData();
    }
  },
  controller: 'Controller'
})
// controller definition
.controller('Controller', function (dataset) {
  this.dataset = dataset;
})

Разрешенные данные будут доступны под указанным именем в контроллере, прикрепленном к определению состояния (через само определение или с ng-controller в корневом каталоге вашего шаблона состояния).

NgRoute # Решимость

// route definition
.when('/path', {
  resolve: {
    dataset: function (Service) {
      return Service.getData();
    }
  },
  controller: 'Controller'
})
// controller definition
.controller('Controller', function (dataset) {
  this.dataset = dataset;
})

Примерно так же, как в примере с ui-router.

NgIf

Отложите рендеринг вашего шаблона, ожидая разрешения обещания.

.controller('outer', function ($timeout) {
  this.resolved = false;
  this.dataset  = [];

  $timeout(function () {
    this.resolved = true;
    this.dataset = [ {}, {} ];
  }.bind(this), 1500);
})
.controller('inner', function () {
  console.log('I just ran!');
})

<div ng-controller="outer as o">
  <div ng-controller="inner as i" ng-if="o.resolved">
    {{o.dataset}}
  </div>
</div>

jsfiddle из последнего решения

0
Kasper Lewau 21 Дек 2015 в 12:15

Просто удали

 ng-init="userselected = vm.data[0]"  

Этот вызов инициализации из login.html

<div>
    <select ng-model="userselected"
            ng-options="option.name for option in vm.data">
    </select>
</div> 

И измените ваш контроллер как -

 .controller('f',function($http,$scope){  // add $scope as a DI
    var l=this;
    $http.get('data.json').success(function(data){
      l.data=data;
      $scope.userselected = l.data[0];  // initalize or select first option
    })
  })

Надеюсь на эту помощь!

0
Dhananjay C 21 Дек 2015 в 09:40

Ваша проблема в том, что vm.data заполняется асинхронно. Когда представление сначала загружается и запускается ng-init, vm.data [0] не определено, поэтому оно не работает. Быстрое решение состоит в том, чтобы добавить ng-if="vm.data" в div обертки, чтобы содержимое в ng-if добавлялось в dom только после определения vm.data.

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

0
james00794 21 Дек 2015 в 07:31

Проверьте это. Так что с angular вы должны связать свою модель с элементами HTML, используя $ scope.

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

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

controller('f',function($http, $scope){
    $scope.vm = null;
    $scope.userselected = null;
    $http.get('data.json').success(function(data){
      $scope.vm=data;
      $scope.userselected = $scope.vm[0];
    })
  })

И изменения в вашем HTML:

    <select ng-model="userselected"
            ng-options="option.name for option in vm">
    </select>
0
Julian Soro 21 Дек 2015 в 07:23

Вот демонстрационная версия о том, как установить значение по умолчанию в опции выбора.

Использование: установить значение с помощью ng-model

HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-select-with-default-values-production</title>  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
  <script src="app.js"></script>

</head>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>
</body>
</html>

JS:

(function(angular) {
  'use strict';
angular.module('defaultValueSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ],
     selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui
     };
 }]);
})(window.angular);

Ссылка: Использование select с ngOptions и установка значения по умолчанию

0
rhitz 21 Дек 2015 в 07:46