标签: ui-select

angular-ui/ui-select:如何正确设置初始选定对象

这是我在视图中的ui选择:

<ui-select ng-model="selectedLabel.selected" ng-disabled="fetchingLabels || working">
    <ui-select-match placeholder="">{{$select.selected.code}}</ui-select-match>
    <ui-select-choices repeat="label in labels| filterBy: ['name', 'code']: $select.search"> 
        <div ng-bind-html="label.code | highlight: $select.search"></div>
        <small ng-bind-html="label.name | highlight: $select.search"></small>
    </ui-select-choices>
</ui-select>

Run Code Online (Sandbox Code Playgroud)

这是我的控制器中的相关代码:

$scope.labels = [];
$scope.selectedLabel = {};
$scope.selectedLabel.selected = $scope.passedLabel; // This is an object passed 
                                                    // from the previous controller.
                                                    // The scope comes with it.


$scope.fetchLabels(); // This fetches the labels from the server
                      // and puts them in $scope.labels

Run Code Online (Sandbox Code Playgroud)

从服务器带来的标签理论上如下:

[{'labelId': 20, 'code': 'L20', 'name': 'some label'}, …

Run Code Online (Sandbox Code Playgroud)

angularjs ui-select

spo*_*rts

lucky-day

8
推荐指数

1
解决办法

1万
查看次数

<ui-select>的W3C验证

我在一个网站中使用angular-ui-select,其中样式化的选择字段配置了一个名为的自己的标签ui-select.这很好用,但是进行W3C验证会导致此错误:

元素ui-select不允许作为元素的孩子div在这方面.(抑制此子树中的更多错误.)

这是一个示例代码:

<!doctype html>
<html lang="en">
<head><title>x</title></head>
<body>
 <div>
  <ui-select></ui-select>
 </div>
</body></html>

Run Code Online (Sandbox Code Playgroud)

我知道<ui-select>预计不会有,但我怎么能更好地处理这个？

我可以将其包装到不同的标签中,还是有不同的方法ui-select而不是使用HTML标记？

html w3c-validation angularjs ui-select

fav*_*avo

2015 02-14

8
推荐指数

2
解决办法

1221
查看次数

在Angular2中使用ui-select替换

我们将现有的angular1项目移动到angular2并想要替换现有的ui-select组件.

我用Google搜索,但找不到ui-selectangular2 的版本.

有没有人找到更好的选择？

angularjs ui-select angular

imf*_*had

lucky-day

8
推荐指数

1
解决办法

8033
查看次数

ui-select禁用,如果为空

我是AngularJS的初学者.我有一个应用程序,它进行API调用,以获得汽车品牌,型号和年份的嵌套列表.我已经创建了三个ui-select元素来显示调用的结果,从汽车品牌列表开始,然后过滤到该品牌中的模型,最后是该模型的年份.我希望第二个和第三个选择在空时禁用,这样用户就无法尝试开始进入汽车模型.

<form class="form-horizontal" ng-controller="instant_quote" ng-submit="loadQuote()" name="quoteform">
    <div class="form-group" id="Make">
        <label for="Makes" class="col-md-3 control-label">Make</label>
        <div class="col-md-9">
            <ui-select
                    id="Makes"
                    ng-model="request.make">
                <ui-select-match placeholder="Enter a Make…">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="choice in makes | filter: $select.search">
                    <div ng-bind-html="choice.name | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
        </div>
    </div>

    <div class="form-group" id="Model">
        <label class="col-md-3 control-label">Model</label>
        <div class="col-md-9">
            <ui-select
                    id="Models"
                    ng-model="request.model"
                    ng-disabled="request.make == 'false'">
                <ui-select-match placeholder="Enter a Model…">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="choice in request.make.models | filter: $select.search">
                    <div ng-bind-html="choice.name | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
        </div>
    </div>

Run Code Online (Sandbox Code Playgroud)

这是我试图确定每个选择是否为空的方法,基于当ng-model被初始化时Angular ui-select占位符不起作用

我的所有输入都没有被禁用.

angularjs ui-select

Ben*_*ers

2017 05-23

7
推荐指数

1
解决办法

1万
查看次数

Angularjs:用户选择ui-select-choice中的ng-click

我试图在选项中使用添加按钮,但问题是ng-click触发但未选中该选项.

<ui-select ng-model="datactrl.newservice.selected" theme="selectize" ng-disabled="disabled" style="width: 100%;">
    <ui-select-match placeholder="...">
        <span ng-bind-html="$select.selected.name"></span>          
    </ui-select-match>
    <ui-select-choices repeat="service in data.base_services | filter: $select.search">
        <span ng-bind-html="service.name | highlight: $select.search"></span>

        <!-- HERE NOT -->
        <a href="" class="pull-right" ng-click="setnewservice()">
            <i class="glyphicon glyphicon-plus-sign"></i>
        </a>    
        <!-- ### -->

    </ui-select-choices>
</ui-select>                            


<!-- here obviously works -->
<a href="" class="pull-right" ng-click="setnewservice()">
    <i class="glyphicon glyphicon-plus-sign"></i>
</a>

Run Code Online (Sandbox Code Playgroud)

我可以向函数发送一些参数并处理这种情况,甚至选择该项目索引的点击链接,以便模型采用正确的值,或者像上面的工作样本中那样把它带到外面...

但是我怎样才能正确处理这个,停止事件,选择选项而不发送对象或它的一些属性,然后做其余的事情？

$scope.setnewservice = function ($event) {
    $event.stopPropagation();
    // ??
}

Run Code Online (Sandbox Code Playgroud)

angularjs ui-select

dan*_*iel

2015 04-17

7
推荐指数

1
解决办法

6578
查看次数

UI-select下拉选项未显示在面板主体上方

我有一个固定高度的面板,溢出设置为自动.在该面板内我使用ui-select.

点击/打开选择框,它将隐藏在面板页脚后面,用户必须向下滚动才能查看.是否可以在具有固定高度和溢出设置的盒子外面获得ui-select显示.

         <div class="panel-body" style="height:100px;overflow:auto;">
              <div class="col-md-12">
                <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
                <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
                <div ng-bind-html="person.name | highlight: $select.search"></div>
                  <small>             email: {{person.email}}             age:             
                     <span ng-bind-html="''+person.age | highlight: $select.search"></span>
                  </small>
              </ui-select-choices>
              </ui-select>
        </div>

Run Code Online (Sandbox Code Playgroud)

PLUNKER LINK

html css angularjs ui-select

Bal*_*wal

2014 11-20

6
推荐指数

1
解决办法

3863
查看次数

对象数组上的角度ui-select标记

情况:

我有一个发送电子邮件的角度应用程序.有三个字段:地址 - 主题 - 文本.地址字段使用角度ui-select构建

电子邮件地址可以从列表中选择或重新输入.问题是输入新的电子邮件地址.

我试图使用标记属性来获取它.但据我所知,只有当ui-select由一组简单字符串组成而不是由一个对象数组组成时才能工作

码:

<h3>Array of objects</h3>
<ui-select multiple tagging tagging-label="new tag" ng-model="multipleDemo.selectedPeople" theme="select2" ng-disabled="disabled" style="width: 800px;">
  <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
  <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
    <div ng-bind-html="person.name | highlight: $select.search"></div>
    <small>
      email: {{person.email}}
      age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
    </small>
  </ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo.selectedPeople}}</p>

Run Code Online (Sandbox Code Playgroud)

PLUNKER:

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

正如您所看到的,它对于简单的字符串数组而不是对象数组是正常的

题:

如何在ui-select中使用带有对象数组的标记？

javascript tags select angularjs ui-select

Fra*_*ssi

2014 12-04

6
推荐指数

1
解决办法

7344
查看次数

角度ui-select标记在模糊时丢失文本输入

情况

大家好!我正在为我的应用程序使用Angular ui-select,以便从数据库中选择用户.如果用户不在列表中,则可以使用标记输入新条目.

通过写入名称并按ENTER或TAB,新条目将保存为新标记.

一切都工作得很好,除了一件小事:如果我用鼠标集中注意力,我会输入我输入的输入,这对用户不太友好.

码

<h3>Array of objects</h3>
<ui-select multiple tagging tagging-label="new tag" ng-model="multipleDemo.selectedPeople" theme="select2" ng-disabled="disabled" style="width: 800px;">
  <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
  <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
    <div ng-bind-html="person.name | highlight: $select.search"></div>
    <small>
      email: {{person.email}}
      age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
    </small>
  </ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo.selectedPeople}}</p>

Run Code Online (Sandbox Code Playgroud)

PLUNKER

http://plnkr.co/edit/7fSAKmj3pLeeTaid4pMH?p=preview

题

如何设置将输入文本保存为新标签,不仅可以通过按ENTER,还可以通过鼠标聚焦？

非常感谢你!

javascript angularjs angular-ui ui-select

Fra*_*ssi

lucky-day

6
推荐指数

1
解决办法

1988
查看次数

Angular ui-select multi select:从控制器中选择一些项目时,下拉菜单没有更新

点击"选择黄色"按钮,我想在所选列表中添加黄色.黄色正在被选中,但下拉列表仍显示黄色.以同样的方式,我想点击"取消选择黄色"按钮取消选择黄色.我能够取消选择黄色,但下拉列表中没有出现黄色.请帮我解决这个问题.HTML:

<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
      {{color}}
    </ui-select-choices>
    </ui-select>
    <p>Selected: {{multipleDemo.colors}}</p>

    <input type="button" value="select yellow color" ng-click="selectYellowColor()"/>
    <input type="button" value="deselect yellow color" ng-click="deselectYellowColor()"/>

Run Code Online (Sandbox Code Playgroud)

JS:

  $scope.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
  $scope.multipleDemo = {};
  $scope.multipleDemo.colors = ['Blue','Red'];

  $scope.selectYellowColor = function(){
    if($scope.multipleDemo.colors.indexOf($scope.availableColors[3]) == -1){
      $scope.multipleDemo.colors.push($scope.availableColors[3]);
    }
  };

  $scope.deselectYellowColor = function(){
    if($scope.multipleDemo.colors.indexOf($scope.availableColors[3]) != -1){
      var index = $scope.multipleDemo.colors.indexOf($scope.availableColors[3]);
      $scope.multipleDemo.colors.splice(index, 1);
    }
  };

Run Code Online (Sandbox Code Playgroud)

这是plunker链接 http://plnkr.co/edit/AHZj1zAdOXIt6gICBMuN?p=preview

multi-select angularjs ui-select angular-ui-select

Sai*_*har

2015 05-11

6
推荐指数

1
解决办法

1万
查看次数

Angular UI-Select为"标记"对象添加重复标记

我正在使用ui-select库来进行"标记"功能.

我正在使用对象数组,其中每个对象都有id和name.它工作正常.

如果我输入不存在的标签,它会创建一个我想要的新标签,但我唯一的问题是如果用户输入已经存在的标签,它会同时显示新标签和现有标签.ui-select只有在尚未存在时才允许新标记.

如果我输入算法,那么它应该选择/显示现有的"Algorithm"标签,而不是允许重复标签插入.

我无法找到任何设置.他们的标记示例页面ui-select标记示例也发生了同样的问题.我想这不是那样的.那么在ui-select中这是可能的,还是应该在我的代码中处理它？有解决方案吗

这是我的代码:

<ui-select multiple tagging="questionVm.addNewTag" theme="select2" ng-model="addQueVm.newQuestion.tags" class="mdl-select">
    <ui-select-match  placeholder="Enter tags">
        <span ng-bind="$item.name"></span>
    </ui-select-match>
    <ui-select-choices repeat="tag in (questionVm.allTags | filter: $select.search)">
        <span ng-bind="tag.name"></span>
    </ui-select-choices>
</ui-select>

Run Code Online (Sandbox Code Playgroud)

javascript jquery tagging angularjs ui-select

Rah*_*ore

lucky-day

6
推荐指数

1
解决办法

330
查看次数