选择的AngularJS ng-model未设置selected =“selected”属性

时间:2014-08-05 21:53:47

标签: angularjs angularjs-ng-model

我有一个用于编辑手术的AngularJS页面,但我无法获得任何< select>以显示当前值。表单中的所有其他字段都显示其当前值,因此我不确定我做错了什么。

我有一个使用ngResource设置的工厂,这是在我的控制器中。

// Supporting Data
SurgeryData.get({'accessToken':$rootScope.accessToken})
    .$promise.then(function(response){
        $scope.surgeryData = response.surgeryData;
    });

// Surgery Data
SurgeryServices.get({'surgeryId':$stateParams.surgeryId,'accessToken':$rootScope.accessToken})
    .$promise.then(function(response){
        $scope.surgeryDetails = response;

        $scope.formData.surgeryId = $scope.surgeryDetails.surgery.id;
        ...
        $scope.formData.surgeryStatus = $scope.surgeryDetails.surgery_status;
        ...

        $log.log( angular.toJson( $scope.formData.surgeryStatus ) );
        $log.log( angular.toJson( $scope.surgeryData.surgery_status ) );
    });

这是手术状态的HTML

<select class="form-control" ng-model="formData.surgeryStatus" ng-options="status.name for status in surgeryData.surgery_status"></select>

这就是我从2 $ logs

中获得的控制台

$ scope.formData.surgeryStatus

{"id":16,"name":"Ready For Pick-Up"}

$ scope.surgeryData.surgery_status

[{"id":13,"name":"Inventory Not On Site"},{"id":14,"name":"Inventory On Site"},{"id":16,"name":"Ready For Pick-Up"},{"id":15,"name":"Sterilized For Surgery"}]

表单中的&lt; select&gt;包含所有选项但是(对于此示例)未选择Ready for Pick-Up并且我有空?选项已添加到选择

<select class="form-control ng-pristine ng-valid" ng-model="formData.surgeryStatus" ng-options="status.name for status in surgeryData.surgery_status">
    <option value="?"></option>
    <option value="0">Inventory Not On Site</option>
    <option value="1">Inventory On Site</option>
    <option value="2">Ready For Pick-Up</option>
    <option value="3">Sterilized For Surgery</option>
</select>

1 个答案:

答案 0 :(得分:2)

ng-init应该是要走的路。

查看:

<select class="form-control ng-pristine ng-valid" ng-init="formData.surgeryStatus = selected" ng-model="formData.surgeryStatus" ng-options="status.name for status in surgeryData.surgery_status track by status.id">
   <option value="?"></option>
   <option value="0">Inventory Not On Site</option>
   <option value="1">Inventory On Site</option>
   <option value="2">Ready For Pick-Up</option>
   <option value="3">Sterilized For Surgery</option>
</select>

Viewmodel:

$scope.selected = $scope.surgeryDetails.surgery_id;

ng-init将从您的选项中找到匹配值,并在加载时选择它。确保将ng-model设置为您想要选择的任何值,在这种情况下看起来像您的Id?