ng-options作为指令参数

时间：2017-09-06 21:29:30

标签： javascript angularjs

所以，我在this question上提出了同样的问题，遗憾的是，没有人回答，所以，这里再次提出

我正在尝试创建一个select指令，我可以将ng-options作为参数发送。

这是我的指示

app.directive('dropDown', function () {
    return {
        restrict: 'E',
        template: function (element, attrs) {
            return '<div class="col-sm-{{labelCol}} control-label">' +
                        '<label>{{label}}:</label>' +
                    '<div>' +
                    '<div clas="col-sm-{{controlCol}}">' +
                        '<label style="cursor:pointer" ng-show="!edit && forEdit" ng-disabled="disabled" ng-click="edit = true;">{{ngModel}}</label>' +
                        '<i ng-show="!edit && forEdit && !disabled" class="fa fa-pencil-square-o" style="cursor:pointer" aria-hidden="true" ng-click="edit = true;"></i>' +
                        '<select name="{{name}}" ng-change="ngChange" ng-blur="edit = false" ng-show="edit || !forEdit" class="form-control" ng-model="ngModel" ng-required="required" ng-options={{options}}/>' +
                    '</div>'
        },
        replace: true,
        scope: {
            ngModel: '=',
            ngChange: '&',
            label: '@',
            labelCol: '@',
            controlCol: '@',
            type: '@',
            name: '@',
            disabled: '=',
            required: '=',
            forEdit: "=",
            options: "@"
        },
        link: function (scope, element, attrs) { },
        compile: function (element, attrs) {
            if (!attrs.labelCol) attrs.labelCol = '4';
            if (!attrs.controlCol) attrs.controlCol = '8';
            if (!attrs.required) attrs.required = false;
            if (!attrs.disabled) attrs.disabled = false;
            if (!attrs.forEdit) attrs.forEdit = false;
            attrs.edit = !attrs.forEdit;
        }

    }
})

这是指令的实现

<div class="row">
    <drop-down ng-model="site" for-edit="true" label="Site Test" options="x.SITE_CODE as x.SITE_NAME for x in sites"></drop-down>
</div>
<div class="row">
    <drop-down ng-model="site1" for-edit="true" label="Site Test" options="x for x in sites1"></drop-down>
</div>

我得到相同的回复

  

错误：[$ parse：syntax]语法错误：令牌＆＃39; in＆＃39;是一个意外的令牌   在[in sites1]中的表达式[x in sites1]的第3列。

     

错误：[$ parse：syntax]语法错误：令牌＆＃39; as＆＃39;是一个意外的令牌   表达式[x.SITE_CODE的第13列，作为x.SITE_NAME的x in   网站]从[作为x.SITE_NAME for x in sites]开始。

知道如何达到我想要的效果吗？

EDIT1：

如果有帮助，这里应该填充选择

的数组 
$scope.sites = JSON.parse("[{\"SITE_CODE\":\"1\",\"SITE_NAME\":\"SITE1\",},{\"SITE_CODE\":\"2\",\"SITE_NAME\":\"SITE2\"},{\"SITE_CODE\":\"3\",\"SITE_NAME\":\"SITE3\"},{\"SITE_CODE\":\"4\",\"SITE_NAME\":\"SITE4\"}]");
$scope.sites1 = ["SITE1", "SITE2", "SITE3", "SITE4"];

编辑2：

为更复杂的ng-options语句添加了错误

编辑3：

所以，我刚刚意识到，我将ngOptions设置为范围内的双向数据绑定字段，因为它不是必需的，所以我将其从=更改为{ {1}}现在，我收到了另一条错误消息

  

错误：[$ compile：ctreq]无法找到指令＆＃39; ngOptions＆＃39;所需的控制器＆＃39;选择＆＃39;，

哪个，这是不合理的，因为我确实设置了ngOptions，我可以在编译时验证它

编辑4：

所以，经过一些测试，我终于得到了我的控件渲染，但遗憾的是，没有值

选择显然位于控制器div上

@

控制器确实有这个集合

<div class="content" ng-controller="testController">   
    <div class="row">
        <drop-down ng-model="site" for-edit="true" label="Site Test" options="x for x in sites"></drop-down>
    </div>
    <div class="row">
        <drop-down ng-model="site" label="Site Test" options="x for x in sites"></drop-down>
    </div>
    <div class="row">
        <drop-down ng-model="site1" for-edit="true" label="Site Test" options="x for x in sites1"></drop-down>
    </div>
</div>

但我的渲染控件没有任何值 enter image description here

这是其中一个控件

的渲染html 
app.controller('testController', ['$scope', function ($scope) {
    $scope.sites = JSON.parse("[{\"SITE_CODE\":\"1\",\"SITE_NAME\":\"SITE1\",},{\"SITE_CODE\":\"2\",\"SITE_NAME\":\"SITE2\"},{\"SITE_CODE\":\"3\",\"SITE_NAME\":\"SITE3\"},{\"SITE_CODE\":\"4\",\"SITE_NAME\":\"SITE4\"}]");
    $scope.sites1 = ["SITE1", "SITE2", "SITE3", "SITE4"];
}]);

至少现在我正在渲染我的控件，现在开始显示它们的一些值

2 个答案:

答案 0 :(得分：3)

语法ng-options="x in sites1"不正确。

在最简单的形式中，数组中的值 标签：

ng-options="x for x in sites1"

另请查看angular docs for ngOptions以查看所有允许的参数表单。

答案 1 :(得分：0)

嗯，经过多次测试，我终于能够达到理想的效果。

我会将指令留给任何想要使用它的人，因为它允许

  1. 设置所需的选项字符串

  2. 设置要显示的属性，以防我们将完整对象存储在模型中

  3. 已禁用状态，仅显示模型值
  4. 内联编辑值

    5. var app = angular.module("app", []);

app.controller('testController', ['$scope', function($scope) {
  $scope.sites = JSON.parse("[{\"SITE_CODE\":\"1\",\"SITE_NAME\":\"TEST 1\"},{\"SITE_CODE\":\"2\",\"SITE_NAME\":\"TEST 2\"},{\"SITE_CODE\":\"3\",\"SITE_NAME\":\"TEST 3\"},{\"SITE_CODE\":\"4\",\"SITE_NAME\":\"TEST 4\"}]");
  $scope.sites1 = ["TEST 1", "TEST 2", "TEST 3"];

}]);

app.directive('dropDown', function() {
  return {
    restrict: 'E',
    require: 'ngOptions',
    template: function(element, attrs) {
      return '<div>' +
        '<div class="col-sm-{{labelCol}} control-label">' +
        '<label>{{label}}:</label>' +
        '</div>' +
        '<div class="col-sm-{{controlCol}}">' +
        '<label ng-show="!edit && forEdit">{{ngModel[textValue] !== undefined ? ngModel[textValue] : ngModel}}</label> ' +
        '<span ng-show="!edit && forEdit && !disabled" class="fa fa-pencil-square-o" style="cursor:pointer" aria-hidden="true" ng-click="edit = true;">click here for edit</span>' +
        '<select name="{{name}}" ng-change="ngChange" ng-blur="edit = false" ng-show="edit || !forEdit" class="form-control" ng-model="ngModel" ng-required="required" ng-options="{{options}}"/>' +
        '</div>' +
        '</div>';
    },
    replace: true,
    scope: {
      ngModel: '=',
      ngChange: '&',
      label: '@',
      labelCol: '@',
      controlCol: '@',
      type: '@',
      name: '@',
      disabled: '=',
      required: '=',
      forEdit: "=",
      options: "@",
      items: "=",
      textValue: "@"
    },
    compile: function(element, attrs) {
      if (!attrs.labelCol) attrs.labelCol = '4';
      if (!attrs.controlCol) attrs.controlCol = '8';
      if (!attrs.required) attrs.required = false;
      if (!attrs.disabled) attrs.disabled = false;
      if (!attrs.forEdit) attrs.forEdit = false;
      if (attrs.disabled)
        attrs.forEdit = "true";
      attrs.edit = !attrs.forEdit;
    },
    link: function(scope, element, attrs) {

    },

  }
})
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div class="" ng-controller="testController">
    <div class="row">
      <drop-down ng-model="site" for-edit="true" label="Site Test Inline" text-value="SITE_NAME" options="x.SITE_NAME for x in items" items="sites"></drop-down>
      <drop-down ng-model="site1" for-edit="false" label="Site Test Select" options="x for x in items" items="sites1"></drop-down>
      <drop-down ng-model="site1" disabled="true" label="Site Test Disabled" options="x for x in items" items="sites1"></drop-down>
    </div>
  </div>
</div>

相关问题
最新问题