2016-06-09 35 views
0

我在ng-if的條件中有點混亂,需要一些幫助。我正在使用ng-repeat和自定義過濾器來幫助我在頁面上呈現表單。檢查這plunker了。問題是我需要爲數組中的三個鍵提供組合框,但佔位符應該與此數據的當前值。 這是我的divng-if輸入條件

<div ng-repeat="k in rowKeys | filter: '!0' | filter: '!$$'" ng-model="rowVal" > 
    <div ng-if="(k === 'id' || k.toLowerCase().endsWith('id') === false) ? true : false"> 
     <label for="rowValue[{{$index}}]" class="col-sm-2"> 
     {{k | hide:'.name' | makeUppercase }}: 
     </label> 
       <div class=" col-sm-2"> 
     <input ng-if="!isObject(rowData[k])" ng-disabled="disableInput(k)" class="form-control rowValue" id="rowValue[{{$index}}]" 
     ng-model="rowData[k]"/> 

     <input ng-if="isObject(rowData[k])" 
     ng-disabled="disableInput(k)" class="form-control rowValue" id="rowValue[{{$index}}]" 
     ng-model="rowData[k].name"/> 
     <select ng-if="isObject(rowData[k]) && k == 'status'" ng-model="rowData[k].status" class="form-control"> 
      <option ng-repeat="item in status" value="{{item.value}}">{{item.label}}</option> 
      </select> 
     <select ng-if="isObject(rowData[k]) && k == 'priority'" ng-model="rowData[k].priority" class="form-control"> 
     <option ng-repeat="item in priorities" value="{{item.value}}">{{item.label}}</option> 
     </select> 
     <select ng-if="isObject(rowData[k]) && k == 'severity'" ng-model="rowData[k].severity" class="form-control"> 
     <option ng-repeat="item in severities" value="{{item.value}}">{{item.label}}</option> 
     </select> 
    </div> 

,你可以看到,我有3個條件:

  1. 簡單的鍵 - 值
  2. 對象鍵 - 值
  3. 對象的關鍵 - 用鑰匙限制值

所以問題是我不能寫表達式來強制combobox和輸入字段正常工作。如果我正在做這樣的事情ng-if="isObject(rowData[k]) && k == 'status'"輸入消失在任何其他方式我可以看到他們在一起的一個關鍵。另外第二個問題是,我無法知道如何將當前值放置在組合框中的佔位符上。我很感激有人能幫我弄清楚我的錯誤在哪裏。

代碼:

$scope.load = function(){ 

    $http({ 
     method: "GET", 
     url: 'test.json' 
     }) 
     .then(function success(response) { 
       $scope.rowData = response.data; 
        console.log($scope.rowData) 
     }, function error(response) { 
       console.log("It has happend error in response") 
    }).then(function(){ 
     $scope.id = $scope.rowData.id; 
      console.log($scope.id); 
      $scope.rowKeys = Object.keys($scope.rowData); 
    }) 
    } 

    $scope.isObject = function(value) { 
    if(angular.isObject(value)) { 
     return true; 
    } else { 
     return false; 
    } 
    } 

    $scope.disableInput = function (obj) { 

     if (obj === 'eventType'){ 
       return true 
      } 
     else if (obj === 'id'){ 
       return true 
      } 
     else if (obj === 'createdDate'){ 
       return true 
      } 
     else if (obj === 'occuredDate'){ 
       return true 
      } 
     else if (obj === 'study'){ 
       return true 
      } 
    }; 

    $scope.priorities = [ 
       { value: 'high', label: 'High' }, 
       { value: 'medium', label: 'Medium'}, 
       { value: 'low', label: 'Low'} 
      ]; 
      $scope.severities = [ 
       { value: 'benign', label: 'Benign' }, 
       { value: 'severe', label: 'Severe'}, 
       { value: 'medium', label: 'Medium' }, 
       { value: 'mild', label: 'Mild'} 
      ]; 
      $scope.status = [ 
       { value: 'new', label: 'Open' }, 
       { value: 'closed', label: 'Closed'} 
      ]; 

}) 
+0

而不是編輯你的問題的答案,只需用你的解決方案回答自己的問題。 – ryanyuyu

+0

@ryanyuyu未解決的主要問題 – Anton

回答

0

我獨自戰勝它。這是工作代碼

<div ng-repeat="k in rowKeys | filter: '!0' | filter: '!$$'" ng-model="rowVal" > 
    <div ng-if="(k === 'id' || k.toLowerCase().endsWith('id') === false) ? true : false"> 

     <label for="rowValue[{{$index}}]" class="col-sm-2"> 

      {{k | hide:'.name' | makeUppercase }}: 
     </label> 
     <div class=" col-sm-2"> 
      <input ng-if="!isObject(rowData[k])" 
        ng-disabled="disableInput(k)" 
        class="form-control rowValue" 
        id="rowValue[{{$index}}]" 
        ng-model="rowData[k]"/> 

      <input ng-if="isObject(rowData[k]) && k !== 'status' && k !== 'priority' && k !== 'severity' " 
        ng-disabled="disableInput(k)" 
        class="form-control rowValue" 
        id="rowValue[{{$index}}]" 
        ng-model="rowData[k].name"/> 

      <select ng-if="isObject(rowData[k]) && k == 'status'" 
        ng-model="rowData[k].name" 
        class="form-control rowValue" 
        id="rowValue[{{$index}}]" 
        ng-options='stat.value as stat.label for stat in status' > 
       <option value=''>{{rowData[k].name}}</option> 
      </select> 
      <select ng-if="isObject(rowData[k]) && k == 'priority'" 
        ng-model="rowData[k].name" 
        class="form-control rowValue" 
        id="rowValue[{{$index}}]" 
        ng-options='prior.value as prior.label for prior in priorities' > 
       <option value=''>{{rowData[k].name}}</option> 
      </select> 
      <select ng-if="isObject(rowData[k]) && k == 'severity'" 
        ng-model="rowData[k].name" 
        class="form-control rowValue" 
        id="rowValue[{{$index}}]" 
        ng-options='sev.value as sev.label for sev in severities' > 
       <option value=''>{{rowData[k].name}}</option> 
      </select> 
     </div> 
    </div> 
</div>