Question

我正在寻找一种方法，用我的视图绑定范围内多维数组的数据。

这是服务：

sampleApp.factory('ApplicationsService', function ($http, $q) {
    return {
        save: function () { alert(app_url);
            var deferred = $q.defer();
            $http.get(app_url+'application-definition/',
             { headers: { 'Accept': 'application/json', 'Authorization': $.session.get("loginToken") } })
                .success(function (data) { if(data.options=="") { 
                alert("No Budget Option.");
                } else {
                $q.applicationOptions = data;
                var arr = $q.applicationOptions.definitions;
                arr.forEach(function(val){ alert(val.name); });
                // $q.options.push.apply($q.options, data.options);
                // $q.services.forEach(function(entry){
                    // alert(entry);
                //});
                deferred.resolve(); } })
                .error(function (err) { alert("error"); deferred.reject(); });
            return deferred.promise; 
        }
    };
});

这是json形式的结果。

{
    "definitions": [
        {
            "name": "",
            "technologies": [],
            "expectedTraffic": 0,
            "securityPosture": null,
            "dataSensitivity": "PCI",
            "impactCostDuringHours": 0,
            "impactCostOutsideHours": 0,
            "maximumTolerableOutage": 0,
            "maintenanceWindow": "",
            "_id": "533527b16ce785d6138b524f",
            "organisationId": "532fe5db6ce785ce378b4bb5",
            "created": "Fri, 28 Mar 14 18:41:37 +1100",
            "updated": "Fri, 28 Mar 14 18:41:37 +1100",
            "deleted": false
        },
        {
            "name": "PCII",
            "technologies": [],
            "expectedTraffic": 0,
            "securityPosture": null,
            "dataSensitivity": null,
            "impactCostDuringHours": 0,
            "impactCostOutsideHours": 0,
            "maximumTolerableOutage": 0,
            "maintenanceWindow": "",
            "_id": "53352b5d6ce785d6138b52c6",
            "organisationId": "532fe5db6ce785ce378b4bb5",
            "created": "Fri, 28 Mar 14 18:57:17 +1100",
            "updated": "Fri, 28 Mar 14 18:57:17 +1100",
            "deleted": false
        },
        {
            "name": "PCII",
            "technologies": [],
            "expectedTraffic": 0,
            "securityPosture": null,
            "dataSensitivity": null,
            "impactCostDuringHours": 0,
            "impactCostOutsideHours": 0,
            "maximumTolerableOutage": 0,
            "maintenanceWindow": "",
            "_id": "53354f2e6ce785d6138b53c3",
            "organisationId": "532fe5db6ce785ce378b4bb5",
            "created": "Fri, 28 Mar 14 21:30:06 +1100",
            "updated": "Fri, 28 Mar 14 21:30:06 +1100",
            "deleted": false
        },
        {
            "name": "Test Application Definition 2",
            "technologies": [
                "MySQL",
                "PHP"
            ],
            "expectedTraffic": 1,
            "securityPosture": "Low",
            "dataSensitivity": "PCI",
            "impactCostDuringHours": 1,
            "impactCostOutsideHours": 1,
            "maximumTolerableOutage": 1,
            "maintenanceWindow": "Business or After Hours",
            "_id": "533a8a496ce785ce378b5190",
            "organisationId": "532fe5db6ce785ce378b4bb5",
            "created": "Tue, 01 Apr 14 20:43:37 +1100",
            "updated": "Tue, 01 Apr 14 20:43:37 +1100",
            "deleted": false
        }]
}

我想用选择框绑定它。我使用的代码是：

<select class="form-control" id="select-01new" data-ng-options="act in applicationOptions.name">
</select>

这不起作用。如何使用选择框绑定数据。

Answer 1

尝试data-ng-options="act.name for act in applicationOptions.definitions"：

<select class="form-control" id="select-01new" data-ng-options="act.name for act in applicationOptions.definitions">
</select>

使用此绑定，我们使用name属性作为标签，whole object作为值

更新：修改代码以将json结果分配给$ scope：

sampleApp.factory('ApplicationsService', function ($http, $q) {
    return {
        save: function () { alert(app_url);
            var deferred = $q.defer();
            $http.get(app_url+'application-definition/',
             { headers: { 'Accept': 'application/json', 'Authorization': $.session.get("loginToken") } })
                .success(function (data) { if(data.options=="") { 
                alert("No Budget Option.");
                } else {

                    deferred.resolve(data); //resolve data
                 } 
               })
                .error(function (err) { alert("error"); deferred.reject(); });
            return deferred.promise; 
        }
    };
});

你的控制器应该做这样的事情来分配json：

ApplicationsService.save().then(function(data){
     $scope.applicationOptions = data;
});

Answer 2

<select class="form-control" id="select-01new" 
data-ng-options="definition.name for definition in definitions">
</select>

将json中的数据绑定到AngularJs中的选择框

2 个答案: