如何使用名称和值(数字 ID)填充下拉列表?

Jabagchourian 和 Jabagchourian 的区别

如何将下拉列表正确绑定到控制器变量,而是使用下拉数组的 id 属性而不是分配值的值,仍然使用数组的 name 属性显示下拉内容供最终用户选择?

AngularJS 工作下拉模板,但没有 ID/Value 属性

<ui-select ng-model="ctrl.risk.owner" theme="select2" 
           ng-disabled="ctrl.disabled" style="max-width: 150px"
           title="Choose a person">
  <ui-select-match placeholder="Select/Search User">
    {{$select.selected.name}}
  </ui-select-match>
  <ui-select-choices repeat="user in ctrl.users | propsFilter: {name: $select.search}">
      <div value="user.id" ng-bind-html="user.name | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

设置数组(这是我在 select-ui 下拉库中需要 user.id 的地方)

$http.get('api/users').then(function(response){
      if (response.data.Succeeded){     
              for (var key = 0; key < response.data.Result.length; key++){
                    user = response.data.Result[key];     
                    $scope.ctrl.users[user.id] = {name: user.name};
              }
              $scope.ctrl.userDone = true;
              return response.data.Result;
       }
       else{
             $scope.ctrl.msg += "<br />"+ 
             $sce.trustAsHtml(response.data);
       }
}); 

ui-select 不使用 value HTML 属性,因此没有意义。您的选择由您在重复语句中指定的内容指示。

该语句表示用户将用于绑定:

<ui-select-choices repeat="user in ctrl.users | propsFilter: {name: $select.search}">

此语句意味着用户 ID 将用于绑定:

<ui-select-choices repeat="user.id as (id, user) in ctrl.users | propsFilter: {name: $select.search}">

通常, ng-model 对象将获得您指定的绑定内容。我认为让用户进入 没有问题ctrl.risk.owner,但您必须在代码中期待它,然后可以根据需要获取 user.id。我认为您正在尝试访问此行中选定的 ID:

$scope.ctrl.users[user.id] = {name: user.name};

如果这是真的,您应该只是查看ctrl.risk.owner所选用户。

使用 ui-select 提供的示例。我认为这与您最接近的尝试相匹配:http : //plnkr.co/edit/?p=preview

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用AngularJS填充下拉列表值

来自分类Dev

使用SQL填充下拉列表

来自分类Dev

使用反射填充下拉列表

来自分类Dev

使用 AngularJS 填充下拉列表

来自分类Dev

比较数组和填充下拉列表的值

来自分类Dev

使用Jinja从列表动态填充下拉列表

来自分类Dev

如何使用视图模型填充下拉列表

来自分类Dev

如何使用JavaScript填充下拉列表?

来自分类Dev

如何使用Slamdata报告填充下拉列表

来自分类Dev

使用“文本”和“值”填充XML的下拉列表

来自分类Dev

PHP-jQuery-如何使用月份名称填充下拉列表并将值设置为月份编号

来自分类Dev

Python/Flask,使用 SQLite 从下拉列表填充选项中请求 ID

来自分类Dev

用月份名称填充下拉列表

来自分类Dev

如何使用Ajax和php填充可靠的下拉列表

来自分类Dev

从MySql和Php填充下拉列表选择

来自分类Dev

如何从数据集中填充下拉列表?

来自分类Dev

如何设置自动填充下拉列表的样式

来自分类Dev

如何填充特定用户的下拉列表?

来自分类Dev

Angular js使用JSON填充下拉列表

来自分类Dev

使用Reactstrap从API填充下拉列表

来自分类Dev

使用Ajax在Django中填充下拉列表

来自分类Dev

使用Ajax填充级联下拉列表

来自分类Dev

使用datepicker填充日期下拉列表

来自分类Dev

使用CodeIgniter填充表单中的下拉列表

来自分类Dev

使用codeigniter jQuery填充下拉列表

来自分类Dev

使用Spring Mapping URL填充下拉列表

来自分类Dev

使用JSON数据动态填充下拉列表

来自分类Dev

使用php填充下拉列表字段

来自分类Dev

使用PHP ODBC函数填充下拉列表