Angularjs 和 UI-Select:如何从代码中选择一个选项 [英] Angularjs and UI-Select: how to select an option from code

查看:28
本文介绍了Angularjs 和 UI-Select:如何从代码中选择一个选项的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在 angularjs 中我有一个 ui-select:

in angularjs i have a ui-select:

<ui-select ng-model="itemSelected.selected" theme="selectize" ng-disabled="disabled">
   <ui-select-match placeholder="Select an item...">{{$select.selected.Name}}</ui-select-match>
   <ui-select-choices repeat="item in itemsList">
      <span ng-bind-html="item.Name"></span>
   </ui-select-choices>
</ui-select>

如何在加载页面时从代码中选择项目?当我在控制器中加载页面时,我得到 $scope.itemsList:如何从 controller 中选择特定项目?

How can i select an item from code when i load the page? When i load the page in the controller i get the $scope.itemsList: how can i select a specific item from the controller?

谢谢

推荐答案

您可以在控制器加载时自行设置

You can set that on controller load itself

标记

<body ng-controller="DemoCtrl">
  <p>Selected: {{item.selected}}</p>
  <ui-select ng-model="item.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
    <ui-select-match placeholder="Select a item in the list">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="item in items | propsFilter: {name: $select.search, age: $select.search}">
      <div ng-bind-html="item.Code | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
</body>

代码

app.controller('DemoCtrl', function($scope, $http) {
  $scope.disabled = undefined;

  $scope.clear = function() {
    $scope.item.selected = undefined;
  };

  $scope.item = {};
  $scope.items = [
    { name: 'Item1', Code: 'Code1', },
    { name: 'Item2', Code: 'Code3'},
    { name: 'Item3',  Code: 'Code4'},
    { name: 'Item4',  Code: 'Code4' },
    { name: 'Item5', Code: 'Code5' },
  ];

  $scope.item.selected = $scope.items[0] //here you can set the item selected
});

工作 Plunkr

这篇关于Angularjs 和 UI-Select:如何从代码中选择一个选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆