angularjs
  • angular-ui-bootstrap
  • 2017-08-23 22 views 1 likes 
    1

    我想在模態中獲取新值,但無法獲得新值。我試過this,但仍然沒有運氣。我看到的是不同的是,解決方案返回的是$ scope。但是,當我讓我的回報爲$範圍var managementModal不能看到的項目。在模態角度引導中獲取編輯的值

    這是控制器

    var templateModal = "<div class='modal-header'>" + 
         "<button type='button' class='close' ng-click='cancel()'>×</button>" + 
         "</div>" + 
         "<div class='modal-body'>" + 
          "<span>ID</span> <input type='text' readonly='readonly' name='id' value='{{names.id}}' ng-model='editable.id'><br/>" + 
          "<span>Approval</span> <input type='text' name='approval' value='{{names.approval}}' ng-model='editable.approval'><br/>" + 
          "<span>Status</span> <input type='text' name='status' value='{{names.status}}' ng-model='editable.status'><br/>" + 
          "<span>Orderer</span> <input type='text' name='orderer' value='{{names.orderer}}' ng-model='editable.orderer'><br/>" + 
          "<span>Creator</span> <input type='text' name='creator' value='{{names.creator}}' ng-model='editable.creator'><br/>" + 
          "<span>Production Type</span> <input type='text' name='production_type' value='{{names.production_type}}' ng-model='editable.production_type'><br/>" + 
          "<span>First Posting Date</span> <input type='text' name='date' value='{{names.date}}' ng-model='editable.date'><br/>" + 
          "<span>Request Price</span> <input type='text' name='budget' value='{{names.budget}}' ng-model='editable.budget'><br/>" + 
         "</div>"+ 
         "<div class='modal-footer'>" + 
          "<button type='button' class='close' ng-click='cancel()'>cancel</button>"+ 
          "<button type='button' class='close' ng-click='update()'>update</button>"+ 
         "</div>"; 
    
    $scope.edit = function(data) { 
         var modalInstance = $uibModal.open({ 
          template:templateModal, 
          controller: managementModal, 
          resolve: { 
           items: function() { 
            return data; 
           } 
          } 
         }); 
    
         modalInstance.result.then(function(test){ 
          console.log(test); // the result is undefined 
         }); 
        }; 
    

    我的語氣

    var managementModal = function($scope, $http, $uibModalInstance, items){ 
        $scope.cancel = function(){ 
         $uibModalInstance.dismiss('cancel'); 
        }; 
        $scope.names = items; 
        $scope.editable = items[0]; 
        console.log($scope.editable); // the result is undefined 
        $scope.update = function(){ 
         $uibModalInstance.close(); 
        }; 
    }; 
    

    HTML

    <tr ng-repeat="x in names"> 
        <td ng-model="id">{{x.id}}</td> 
        <td>{{x.reg_date}}</td> 
        <td><button id="{{x.id}}" ng-click="edit(x)">edit</button></td> 
        <td>{{x.approval}}</td> 
        <td>{{x.status}}</td> 
        <td></td> 
        <td>{{x.orderer}}</td> 
        <td>{{x.creator}}</td> 
        <td>{{x.production_type}}</td> 
        <td>{{x.date}}</td> 
        <td>N/A</td> 
        <td><input type="checkbox" id="firstrequest_{{x.id}}"></td> 
        <td>{{x.budget}}</td> 
    </tr> 
    
    +0

    在我看來,你只是缺少'$ uibModalInstance.close($ scope.editable)' – Phil

    +0

    @Phil但''scope.editable' is undefined when''console.log'它 –

    +0

    @Phil也''modalInstance.result.then(函數(測試){})'當我'console.log''測試'它是未定義的 –

    回答

    2

    首先做這個控制器(模式)

    $uibModalInstance.close();$uibModalInstance.close($scope.editable);

    然後將$scope.editable = items[0];更改爲$scope.editable = items 因爲您發送的對象不是項目中的數組。 這是一個plnk example與您的代碼。

    在HTML TD也刪除此

    <td ng-model="id">{{x.id}}</td> 
    

    <td>{{x.id}}</td> 
    
    +0

    thnx得到它,所以它是未定義的,因爲它是一個對象 –

    +0

    是未定義的,因爲你t試圖訪問不存在的數組位置。因爲項目不是數組。 –

    +1

    在您發送的HTML中編輯x。這是重複的迭代器,所以它意味着它是對象。並且您嘗試像數組一樣訪問 –

    相關問題