Question

作为一个新的AngularJS用户，我有一个填充数据的表单，如下所示，

我的EntriesFactory.js，

(function () {
    "use strict";

    var EntriesFactory = function ($http) {
        var factory = {};
        //Get Full List
        factory.getEntries = function () {
            return $http.get('ABC/XYZ.cfc?method=GetFullList&returnformat=json&queryformat=struct');
        };
        return factory;
    };

    EntriesFactory.$inject = ['$http'];

    angular.module('appDHCP')
        .factory('EntriesFactory', EntriesFactory);

}());

填充EntryDetails.cfm表格

<form class="form-horizontal" ng-repeat="detail in entry">
  <div class="form-group">
    <h2 class="col-sm-2">Entry Details</h2>
  </div>    
  </div>
  <div class="form-group">
    <label for="Description" class="col-sm-2 control-label">Description</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" placeholder="{{detail.DESCRIPTION}}" value="{{detail.DESCRIPTION}}">
    </div>
  </div>
  <div class="form-group">
    <label for="Lab" class="col-sm-2 control-label">Lab/PI</label>
    <div class="col-sm-4">      
      <select ng-model="???" ng-options="lab.LABIS for lab in labs"></select>
    </div>
  </div>
</form>

此处labs中的

从WistarService.js，

中检索

(function () {
    "use strict";
    var WistarService = function ($http) {        
        this.getLabs = function () {
            return $http.get('ABC/XYZ.cfc?method=GetLabs&returnformat=json&queryformat=struct');
        };
    };

    WistarService.$inject = ['$http'];

    angular.module('appDHCP')
        .service('WistarService', WistarService);

}());

最后，这是我的EntryDetailsController.js

(function () {
    "use strict";
    var EntryDetailsController = function ($scope, $routeParams, EntriesFactory, WistarService) {
        var addressId = $routeParams.REC_ID;
        $scope.entry = null;
        $scope.labs = null;

        //function init() {
            EntriesFactory.getEntry(addressId)
                .success(function (entry) {
                    $scope.entry = entry;
                })
                .error(function (data, status, headers, config) {
                //handel errors
                });
            WistarService.getLabs()
                .success(function (labs){
                    $scope.labs = labs;                                                             
                })
                .error(function (data, status, headers, config) {
                //handel errors
                });
        /*
        }

        init();
        */

    };

    EntryDetailsController.$inject = ['$scope', '$routeParams', 'EntriesFactory', 'WistarService'];

    angular.module('appDHCP')
        .controller('EntryDetailsController', EntryDetailsController);

}());

我想要的是，select默认选择{{detail.LAB}}值，并将labs中的值作为其他选项。

非常感谢任何帮助。

Answer 1

从服务中获得所有实验后，在范围内，您需要手动设置details.LAB变量，该变量应指向实验室数组中的元素。

JSON.stringify

WistarService.getLabs() .success(function (labs){ $scope.labs = labs; $scope.details.LAB= labs.filter(function(){ // some condition to filter})[0]; })指向ng-model。

更新：根据您的评论，应该有一些关键来匹配实验室进入。因此，您应该执行类似

的操作

details.LAB

但请记住，只有$scope.details.LAB= labs.filter(function(lab){ lab.id=$scope.entry.id; )[0];数据可用后才能执行此操作。因此，要么对http操作进行链接，要么对entry进行监视，并在监视中添加该逻辑。

ng-option使用工厂/服务的默认ng模型值

1 个答案: