javascript - 如何在选择框或下拉中默认选择第一个选项

Question

我正在尝试使用指令显示选择框。但是我的默认选项是不显示。

我喜欢这个

<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;
        })
      })

我们可以在调用 Controller 之前加载数据并使用 resolve 加载 html 文件吗？

Answer 1

Can we load data before calling controller and loading the html file using resolve?

是的。这样做的方法是解析您想要在 View 上公开的数据集之前初始化附加到 View 的所述部分的 Controller 。

我可以想到三种方法；

• ui-router#resolve.
• ngRoute#resolve.
• 延迟编译附加到 Controller 的 DOM。

ui-router#resolve

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

已解析的数据将在附加到状态定义的 Controller 中以给定名称提供(通过定义本身，或使用 root 的 ng-controller你的状态模板)。

ngRoute#resolve

// 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

通过等待 promise 解决来延迟模板的呈现。

.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 of the last solution