在ng選項中設置自定義編碼

我正在使用Angular來使用ng-options構建SELECT，並且所有工作都在減去我想要設置該值的事實，而不是使Angular自動填充該值。在ng選項中設置自定義編碼

$scope.form.stage = [{ 
     optional: 1 
     id: 23 
     description: UD Visual Inspection - optional 
    },{ 
     optional: 0 
     id: 12 
     description: Flash 
    }]

我的指令：

<select name='test_stage' ng-model='form.selectedStage' ng-change='abc(form)' ng-options='item.description for item in form.stage'>

渲染HTML：

<select name="test_stage" id="test_form_stage" tabindex="2" ng-model="form.selectedStage" ng-change="abc(form)" ng-options="item.description for item in form.stage" ng-blur="fetchTestStation(form)" class="ng-valid ng-dirty"><option value="0">UD Visual Inspection - optional</option><option value="1">Flash</option></select>

而不必設置的值設置爲0和1的我想23和12 ...

更新渲染HTML：

<select name="test_stage" id="test_form_stage" tabindex="2" ng-model="form.selectedStage" ng-change="abc(form)" ng-options="item.id as item.description for item in form.stage" ng-blur="fetchTestStation(form)" class="ng-valid ng-dirty"><option value="0">UD Visual Inspection - optional</option><option value="1">Flash</option></select>

更新：15年7月25日

form: { 
    selectedStage: null 
    stage: 
[{ 
    optional: 1 
    id: 23 
    description: UD Visual Inspection - optional 
},{ 
    optional: 0 
    id: 13 
    description: Engraving 
}] 
} 
    selectedStage: { 
     $ref: $["form"]["stage"][1] 
}

生成的HTML

<select name="test_stage" id="test_form_stage" tabindex="2" ng-model="form.selectedStage" ng-options="item as item.description for item in form.form.stage" ng-blur="fetchTestStation(form)" class="ng-valid ng-dirty"><option value="?"></option><option value="0">UD Visual Inspection - optional</option><option value="1">Engraving</option></select>

我的控制器 $ scope.fetchTestRecord = FUNC （$ scope）{

// Set vars 
    $scope.workorder = {}; 
    $scope.product = {}; 

    // Set params to send in request 
    var params = $.param({ 
     serial: $scope.serial 
    }); 

    /** 
    * Get stage data for serial from API [Factory] 
    */ 
    tstFrmServices.locateRecord(params).success(function (result) { 
     $scope.data = result.data; 

     // Handle successfull response 
     if ($scope.data['success'][0].code == 200){ 

      $scope.form = { 
       selectedStage: null, 
       stage: $scope.data['success'][0].data 
       }; 

      $scope.workorder = $scope.data['success'][0].wo; 
      $scope.product = $scope.data['success'][0].product; 
     } 


    }).error(function (result) { 

    }); 
};

}）;

數據從工廠

"data": [{"optional": 1, "id": 23, "description": "UD Visual Inspection - optional"}, {"optional": 0, "id": 13, "description": "Engraving"}], "product": "10P91685-010"}]}

來源

2014-07-24 xXPhenom22Xx

得到你想要的值，我想你需要使用語法：ng-options ='item.description for item in form.stage track通過id' –

[文檔]（http://docs.angularjs.org/api/ng.directive:select）解釋瞭如何清楚地做到這一點（'select as ...'）。 – Blackhole

'track by id'僅渲染單個選項框（第一個），值爲'？' – xXPhenom22Xx

返回如果讓selectedStage是整個選擇的對象，你可以從form.selectedStage.id

<select name='test_stage' 
    ng-model='form.selectedStage' 
    ng-change='abc(form)' 
    ng-options='item as item.description for item in form.stage'> 
</select>

http://embed.plnkr.co/fsn5qakC6nKUOdQKhYjR/preview

來源

2014-07-24 21:06:37

這對於迄今爲止的幫助來說非常有用。我原本走下了這條路，但似乎與selectedStage有可能獲得格式不正確的JSON有關的問題（請參閱上面的更新）。當我選擇一個階段時，selectedStage模型獲取該$ ref而不是值，同樣當我檢查元素時，我沒有看到我的ID爲該值。不知道我在哪裏出錯了這個任務。 – xXPhenom22Xx

沒關係，做了這個調整，它似乎在工作：ng-options ='item.id as item.description for item in form.form.stage' – xXPhenom22Xx

在ng選項中設置自定義編碼

回答

相關問題