在ng-options中设置自定义ID

时间:2014-07-24 20:10:33

标签: angularjs ng-options

我正在使用Angular使用ng-options构建一个SELECT,并且所有这些都在减去我想要设置值的事实,而不是让Angular自动填充它。

$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>

更新时间:7-25-15

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 = function($ 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"}]}

1 个答案:

答案 0 :(得分:2)

如果您让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