Question

我正在尝试创建一个应用程序，它将在模态窗口中显示作业详细信息，具体取决于所选的模板。为此，我合并了ui.bootstrap和ui.router。但由于某种原因，我无法像我希望的那样设法显示对象。我知道$http.get正在运行，就像我执行console.log(specs)时一样，会显示该对象。

这是我的代码：

HTML

<div class="car-up" ng-controller="carCtrl">
     <script type="text/ng-template" id="careersTpl.html">
        <div class="closer">
            <span class="close-me" ng-click="ok()">X</span>
        </div>
        <div class="modal-body">
            <span>{{placeholder}}</span>
        </div>
        <div class="modal-body modtwo">
            <ul>
                <li><a ui-sref="sales">Sales Department</a></li>
            </ul>
            <ul>
                <li><a ui-sref="webd">Web Developer</a></li>
                <li><a ui-sref="crm">Client Relationship Manager</a></li>
                <li></li>

            </ul>
        <div class="show-me" ui-view></div>
        </div>
     </script> 
     <button class="btn" ng-click="open()">Open</button>
</div>

app.js

var app = angular.module('carApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('webd', {
            url: "/web-developer",
            templateUrl: "templates/web-developer.html",
        })
        .state('crm', {
            url: "/crm",
            templateUrl: "templates/crm-uk.html"
        })
}]);

ctrl.js

app.controller('carCtrl', function($scope, $http, $uibModal) {
    $http.get('jobs.json').then(function(response) {
        $scope.placeholder = response.data.default;
        $scope.specs = response.data.specs;

        $scope.open = function() {

            var modalContent = $uibModal.open({
                templateUrl: 'careersTpl.html',
                controller : 'modalContentCtrl',
                controllerAs: '$ctrl',
                size: 'lg',
                backdropClass: 'backdropOver',
                openedClass: 'modal-opened',
                resolve: { 
                    items: function() { return $scope.specs; },
                    items2: function() { return $scope.placeholder;}
                }
            })
        console.log($scope.placeholder);
        console.log($scope.specs);
        console.log($scope.specs.crm);
        }
    });
});

app.controller('modalContentCtrl', function($scope, $uibModalInstance, items, items2) {
    $scope.specs = items;
    $scope.placeholder = items2;
    $scope.ok = function() {
        $uibModalInstance.close();
    }
});

CRM-uk.html

<div ng-repeat="(k, v) in specs.crm">
    <h3>{{v["job-title"]}}</h3>
    <p>{{v["job-body"]}}</p>
    Apply Here:
    <p>{{v["job-apply"]}}</p>
</div>

网络-developer.html

<div ng-repeat="(k, v) in specs.web-dev">
    <h3>{{v["job-title"]}}</h3>
    <p>{{v["job-body"]}}</p>
    Apply Here:
    <p>{{v["job-apply"]}}</p>
</div>

JSON

{
   "default":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   "specs":{
      "web-dev":{
         "job-title":"Web Developer",
         "job-body":"Lorem Ipsum Body Text",
         "job-apply":"applink"
      },
      "crm":{
         "job-title":"Client Relationship Manager",
         "job-body":"Lorem Ipsum CRM Text",
         "job-apply":"applylink"
      }
   }
}

我认为我的.json文件或我如何访问它有问题，但无法弄清楚是什么。

有人可以帮忙吗？

感谢。

Answer 1

首先最好更改JSON结构如下：

{
    "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    "specs": {
        "web-dev": [{
            "job-title": "Web Developer",
            "job-body": "Lorem Ipsum Body Text",
            "job-apply": "applink"
        }],
        "crm": [{
            "job-title": "Client Relationship Manager",
            "job-body": "Lorem Ipsum CRM Text",
            "job-apply": "applylink"
        }]
    }
}

制作＆＃34; crm＆＃34;作为倍数列表。然后在视图文件中，您可以循环播放＆＃34; crm＆＃34;规格清单。

<div ng-repeat="item in specs.crm">
    {{item['job-title']}}<br/>
    {{item['job-body']}}<br/>
    {{item['job-apply']}}<br/>
</div>

或使用{{::item['job-title']}}进行单一数据绑定以限制摘要周期

工作Plunkr here 请注意，仅针对＆＃39; CRM＆＃39;

进行了更新

无法显示对象内容 - AngularJS

1 个答案: