Question

我想为select-ui创建一个包装器，因为我的项目将从同一个地方加载，所以将它放在一个指令中，而不是把它放在我的网站上，加上因为我在同一个控件中使用所有地方，如果我们将来更新它，我只想在一个地方更新它。

我已经构建了一个包装器，但由于某种原因，select中的值没有被更新。

这是一个plunkr，带有示例代码

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

要使用ui-select，您只需执行

<div dropdown-select ng-model="input"></div>

修改

我可能没有说清楚，但我想在名为dropdown-select的包装器指令中使用ng-model。当我使用这个下拉选择时，我不想使用相同的范围变量名。

例如，如果我在输入上使用ng-model，我可以

<input ng-model="input1" />
<input ng-model="myVarName" />
<input ng-model="somethingDifferent" />

以上所有三个例子都可以使用，每个例子都会保留我输入的值。

现在我希望能够使用我使用过的包装器指令做同样的事情，就像你可以在输入和其他控件上使用ng-model一样。

所以我应该能够做到

<div dropdown-select ng-model="input1"></div>
<div dropdown-select ng-model="myItem"></div>
<div dropdown-select ng-model="whateverIWant"></div>

现在，一旦选择了值，select-ui就会将所选项填充到这些范围变量中。

这是一个带有2个下拉选择包装实例的plunkr，当选择了select-ui值时，它们都没有显示所选的值。

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

Answer 1

尝试将 .id 添加到指令模板中的ng-model属性中。（您可以使用任何其他密钥，例如.data）

template: '<ui-select ng-model="ngModel.id">' + ....

如果要在控制器中设置初始值，则必须添加以下内容：

$scope.input = {"id":{"id":2,"name":"item 2"}};

首先，第一个id键是在ng-model中使用的。

http://plnkr.co/edit/1t4kKYnU0PFYXRP3vQAP?p=preview

Answer 2

这是解决方案！

修复您的JS

     angular.module('dgUi', ['ui.select', 'ngSanitize'])

        .config(['uiSelectConfig', function(uiSelectConfig){
          uiSelectConfig.theme = 'bootstrap';
        }])

        .controller('BaseController', ['$scope', function($scope) {
          // changed here to use $scope.data instead of $scope.input
          $scope.data = {"results":{
              id:0, 
              name:'item0'}
          };
        }])

        .controller('DropdownSelectController', ['$scope', function ($scope) {
          $scope.items = [];

          $scope.refresh = function (text) {
                $scope.items = [];

                for (var i = 0; i < 100; i++) {
                  $scope.items.push({id: i, name: 'item ' + i});
                }
          };
        }])

        .directive('dropdownSelect', function () {
            'use strict';

        // do not want to change ng-model="input.name" to anything else as
        // this should be a directive and cannot be changed

            return {
                restrict: 'A',
                scope: false,
                controller: 'DropdownSelectController',
                template: '{{data.results}}<ui-select ng-model="data.results">' +
                               '<ui-select-match placeholder="Enter an address...">{{$select.selected.name}}</ui-select-match>' +
                               '<ui-select-choices repeat="item in items track by $index"' +
                               '    refresh="refresh($select.search)"' +
                               '    refresh-delay="0">' +
                               '   <div ng-bind-html="item.name | highlight: $select.search"></div>' +
                               '</ui-select-choices>' +
                           '</ui-select>',
                link: function (scope, element, attrs, ctrl) {

                }
            }
        });

您的HTML将

value in $scope.input: {{ data.results }}

<div class="form-group" style="width:300px">
  <label>select an item</label>

  <!-- changed here to show data -->
  <div dropdown-select ></div>
</div>

工作示例：

http://plnkr.co/edit/VuktEq?p=info

Answer 3

对我来说，这是没有更新文本的元素，我这样使用它：

var exec = require('child_process').exec;

gulp.task('runWebpack', function (callback) {
  exec('npm run webpack', callback);
})

Angular UI Select-UI不会在select上更新模型？

3 个答案: