Estoy tratando de crear una aplicación que muestre los detalles del trabajo en la ventana modal, según la plantilla seleccionada. Para esto he combinado ui.bootstrap y ui.router. Pero por alguna razón, no puedo mostrar los objetos como me gustaría. Sé que $http.get está funcionando, ya que cuando hago console.log(specs), se muestra el objeto.

Este es mi código:

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"
      }
   }
}

Creo que algo anda mal con mi archivo .json o cómo estoy accediendo a él, pero no puedo averiguar qué.

¿Puede alguien por favor ayudar?

Gracias.

0
eric.dummy 6 dic. 2016 a las 15:10
Prueba

{{v.job-title}}

 – 
Gaurav Srivastava
6 dic. 2016 a las 15:13
Ya lo intenté, esto es lo que obtengo en la salida: 0 0 Aplicar aquí: 0 0 0 Aplicar aquí: 0 0 0 Aplicar aquí: 0
 – 
eric.dummy
6 dic. 2016 a las 15:15
¿Y por qué se repite siempre "Aplicar aquí"?
 – 
eric.dummy
6 dic. 2016 a las 15:21
Creo que está iterando incorrectamente sobre los valores-clave JSON. Consulte este enlace para saber cómo hacer esto correctamente.
 – 
31piy
6 dic. 2016 a las 15:22
Publique una solución de trabajo. Gracias.. :)
 – 
eric.dummy
6 dic. 2016 a las 15:35

1 respuesta

La mejor respuesta

Primero es mejor cambiar la estructura JSON de la siguiente manera:

{
    "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"
        }]
    }
}

Haga el "crm" como una lista de múltiplos. Luego, en el archivo de vista, puede recorrer la lista de especificaciones de "crm".

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

O use {{::item['job-title']}} para el enlace de datos únicos para limitar los ciclos de resumen

Trabajando Plunkr aquí Tenga en cuenta que solo se actualizó para 'CRM'

1
daan.desmedt 6 dic. 2016 a las 16:34
El :: limita la vinculación solo al primer conjunto de observadores de resumen. Lo que significa que no se establece una vigilancia continua en los valores de vista utilizados. Puede encontrar más detalles aquí toddmotto.com/one-way -encuadernación-de-datos-en-angular-1-5. Resulta útil para los datos que no cambian desde dentro de su aplicación y aumentan el rendimiento.
 – 
daan.desmedt
6 dic. 2016 a las 17:54
Gracias amigo, primera vez que veo esto.
 – 
eric.dummy
6 dic. 2016 a las 18:04
Solo para que conste, me las arreglé para hacer esto usando (k, v) y luego llamando al valor, es decir: {{v["job-title"]}}, etc.
 – 
eric.dummy
6 dic. 2016 a las 18:21