Question

我有一个有按钮的网格，通过点击该按钮，它打开一个模态窗口，允许用户修改该行中的数据，所需的代码是

//Html file
<body ng-controller="MyCtrl">
   <script type="text/ng-template" id="myModalContent.html">
          <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
          </div>
       <div class="modal-body" >
           <button>Hello</button>
             <form>
             <input data-ng-model="items.name"/>
             <input data-ng-model="items.age"/>
                <input data-ng-model="items.SA"/>
             <button class="primary" data-ng-click="ok()">save</button>
             <button class="primary" data-ng-click="cancel()">cancel</button>
             </form>
        </div>
    </script>
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
//Js file
// main.js
var app = angular.module('myApp', ['ngGrid','ui.bootstrap']);
var cellTemplate='<div class="ngCellText"  data-ng-model="row"><button data-ng-click="updateSelectedRow(row,$event)">Edit</button></div>'
var ctrl=app.controller('MyCtrl', function($scope,$modal) {
    $scope.myData = [{name: "Moroni", age: 50,SA: 2,},
                     {name: "Tiancum", age: 43,SA:1,},
                     {name: "Jacob", age: 27,SA: 2,},
                     {name: "Nephi", age: 29,SA: 4,},
                     {name: "Enos", age: 34,SA: 1,}];
    $scope.gridOptions = { 
      data: 'myData', 
      enableCellSelection: true,
      enableCellEdit: true,
      enableRowSelection: false,
      columnDefs: [{field: 'name', displayName: 'Name', enableCellEdit: true}, 
      {field:'age', displayName:'Age'},
      {field:'SA', displayName:'ServiceAffecting', 
//cellTemplate:'<div><img ng-src="{{row.getProperty(\'"SA"\') | imagefilter}}"></img></div>'
cellTemplate:'<div><img ng-src="{{row.getProperty(\'SA\') | imagefilter}}"></img></div>'},
      {field:'',cellTemplate:cellTemplate}   
      ]
    };
    var dialog;
    $scope.updateSelectedRow=function(row){
       $scope.myrow=row.entity;
     var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return row.entity;
        }
      }
    });

    }
    $scope.save=function(){
      console.log($modal);
     $modal.dismiss('cancel');
    }

});
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

  $scope.items = items;
  var name=items.name;
  var age=items.age;
  var SA=items.SA;


  $scope.ok = function () {
   $modalInstance.close();


  };

  $scope.cancel = function () {
    items.name=name;
    items.age=age;
    $modalInstance.dismiss('cancel');
  };
  };
app.filter('imagefilter', function() {
        return function(SA) {
            if(SA===0) { return 'http://goo.gl/aFomAA'; }
            if(SA===1) { return 'http://goo.gl/vxCnLC'; }
            if(SA===2) { return 'http://goo.gl/aFomAA'; }
              if(SA===4) { return 'http://goo.gl/aFomAA'; }
                if(SA===5) { return 'http://goo.gl/aFomAA'; }
            return 'unknown';
        };

});

当我为图像编辑值时，它没有得到更新，无法理解为什么？要么碰巧点击该按钮，图像应该自动变为红色，任何解决方案都将受到赞赏。谢谢你的支持。

Answer 1

模态将items.SA变为字符串，因此imagefilter中的分支不再匹配，因为SA仅与数值进行比较。

我想到了两个解决方案：

使用数字输入框：<input type="number" data-ng-model="items.SA"/>

或

将SA强制转换为imagefilter：

中的数字

app.filter('imagefilter', function () {
    return function (SA) {
        SA = +SA; //coerce SA into a number
        if (SA === 0) {
        ....

在ng-grid中编辑数据后，图像没有得到更新

1 个答案: