javascript - 无法显示对象内容-AngularJS

我正在尝试制作一个将在模态窗口中显示作业详细信息的应用程序，具体取决于所选的模板。为此，我结合了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>

web-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文件或我如何访问它有问题，但无法弄清楚是什么。

有人可以帮忙吗？

谢谢。

最佳答案

最好首先更改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"
        }]
    }
}

使“ crm”为倍数列表。
然后，在视图文件中，可以循环“ crm”规格列表。

<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
请注意，仅针对“ CRM”进行了更新

关于javascript - 无法显示对象内容-AngularJS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40995096/