【问题标题】:Angularjs ng-grid with select cell not seleceted to right valueAngularjs ng-grid,选择单元格未选择正确的值
【发布时间】:2013-11-26 23:11:22
【问题描述】:

我正在尝试构建一个表,其中选择了其中一个列,并且我想选择具有从服务器获得的值的选项。 我从服务器获得 4,但选择的是第一个选项。

$scope.lotteryOptions = {
        data: 'myData',
        enableColumnResize: true,
        keepLastSelected: false,
        enableRowSelection: false,
        columnDefs: [{field: 'field1', displayName: 'field1'},
             {field: 'Status', displayName: 'Status', cellTemplate: selectTableTemplate, enableCellEdit: true},
    };

 var selectTableTemplate = "<select ng-selected=\"{{row.getProperty('Status')}}\">         <option value='1' class='ng-binding'>" + 1+ "</option>" +
                           "<option value='2' class='ng-binding'>" + 2 + "</option>" +
                           "<option value='3' class='ng-binding'>" + 3 + "</option>" +
                           "<option value='4' class='ng-binding'>" + 4 + "</option>" +
                           "<option value='5' class='ng-binding'>" + 5 + "</option>" +
                    "<option value='6' class='ng-binding'>" + 6 + "</option></select>";

html结果是:

 <select ng-selected="4">...</select> 

但不是选择4选

【问题讨论】:

    标签: javascript jquery html angularjs ng-grid


    【解决方案1】:

    ng-selected 应该应用于option 标签,而不是select(参见the docs

    $scope.lotteryOptions = {
        columnDefs: [
            {field: 'field1'},
            {field: 'Status', cellTemplate: selectTableTemplate, enableCellEdit: true}
        ],
        data: 'myData',
        enableColumnResize: true,
        enableRowSelection: false,
        keepLastSelected: false
    
    };
    
     var selectTableTemplate = '<select>' +
                               '  <option value="1" class="ng-binding" ng-selected="COL_FIELD == 1">' + 1 + '</option>' +
                               '  <option value="2" class="ng-binding" ng-selected="COL_FIELD == 2">' + 2 + '</option>' +
                               '  <option value="3" class="ng-binding" ng-selected="COL_FIELD == 3">' + 3 + '</option>' +
                               '  <option value="4" class="ng-binding" ng-selected="COL_FIELD == 4">' + 4 + '</option>' +
                               '  <option value="5" class="ng-binding" ng-selected="COL_FIELD == 5">' + 5 + '</option>' +
                               '  <option value="6" class="ng-binding" ng-selected="COL_FIELD == 6">' + 6 + '</option>' +
                               '</select>';
    

    【讨论】:

      【解决方案2】:

      ng-selected 已经是一个角度属性,因此无需插入{{ }}

      var selectTableTemplate = "<select>         <option ng-selected=\"row.getProperty('Status') == 1\" value='1' class='ng-binding'>" + 1 + "</option>" +
                                 "<option ng-selected=\"row.getProperty('Status') == 2\" value='2' class='ng-binding'>" + 2 + "</option>" +
                                 "<option ng-selected=\"row.getProperty('Status') == 3\" value='3' class='ng-binding'>" + 3 + "</option>" +
                                 "<option ng-selected=\"row.getProperty('Status') == 4\" value='4' class='ng-binding'>" + 4 + "</option>" +
                                 "<option ng-selected=\"row.getProperty('Status') == 5\" value='5' class='ng-binding'>" + 5 + "</option>" +
                          "<option ng-selected=\"row.getProperty('Status') == 6\" value='6' class='ng-binding'>" + 6 + "</option></select>";
      

      注意:这也假设Status 是一个值,而不是一个对象。

      更新: ng-selected 不是 select 的属性。只是option的一个属性。

      【讨论】:

      • 不工作,我的代码html结果是: 但不是选择4选择
      • 已更新。 ng-selected 只能用于选项,不能用于选择。它需要是布尔返回表达式。
      猜你喜欢
      • 1970-01-01
      • 2014-03-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-07-29
      • 2013-12-12
      • 2018-07-01
      • 2014-04-11
      相关资源
      最近更新 更多