json数据更改时触发显示

时间:2017-09-22 17:37:44

标签: javascript angularjs json

我正在尝试隐藏上传按钮,并在用户上传文件时显示新的编辑按钮。我正在使用angular-file-upload和md-data-table库。我使用测试函数来保存单击的行,然后在文件上传后我更改json中的上传值。它在user_doc json对象中将值更改为true但它没有隐藏html中的按钮

这是我的HTML

的剪辑
<md-table-container>
    <table md-table multiple ng-model="selected">
        <thead md-head md-order="query.order">
            <tr md-row>
                <th md-column><span class="settings-header">Tipo de documento</span></th>
                    <th md-column><span class="settings-header actions">Acciones</span></th>
            </tr>
        </thead>
        <tbody md-body>
            <tr md-row md-select-id="id" md-auto-select ng-repeat="row in options">

                <td md-cell>{{row.name}}</td>
                <td md-cell class="buttons-cell" ng-show="!uploaded">
                <div ng-if="uploader">
                    <label for="key" class="md-button profile-upload" ng-click="test(row)" ng-if="!uploaded"><i class="material-icons">file_upload</i></label>
               <!-- <label for="key" class="md-button profile-upload" ng-click="test(row)" ng-if="uploaded"><i class="material-icons">PERP</i></label> -->
                    <input class="ng-hide" id="key" type="file" nv-file-select uploader="uploader" ng-if="!uploaded">
                </div>
            </td>
         </tr>
    </tbody>
</table>

来自控制器的片段

$scope.uploader = new FileUploader();
let row_selection;

$scope.test = function(row,fileItem){
  console.log(row.id);
  row_selection = row;
}
$scope.uploader.onAfterAddingFile = function(fileItem) {
  if(fileItem.file.type === 'image/png' || fileItem.file.type === 'image/jpeg'){
      row_selection.uploaded = true;
  }else{
      showAlert();
  }
}
$scope.user_doc = {
    documents: {
        options: [
            {"id":"01","name":"INE","uploaded":false},
            {"id":"02","name":"Comprobante de domicilio","uploaded":false},
            {"id":"03","name":"CURP","uploaded":false}
        ]
    }
};
$scope.options = $scope.user_doc.documents.options;

1 个答案:

答案 0 :(得分:1)

只需将uploaded中提及的ng-repeat值替换为row.uploaded

<tr md-row md-select-id="id" md-auto-select ng-repeat="row in options">    
                <td md-cell>{{row.name}}</td>
                <td md-cell class="buttons-cell" ng-show="!row.uploaded">
                <div ng-if="uploader">
                    <label for="key" class="md-button profile-upload" ng-click="test(row)" ng-if="!row.uploaded"><i class="material-icons">file_upload</i></label> 
                    <input class="ng-hide" id="key" type="file" nv-file-select uploader="uploader" ng-if="!row.uploaded">
                </div>
            </td>
         </tr>