将JSON数据注入AngularJS Bootstrap模式

时间:2016-04-01 05:15:56

标签: javascript angularjs json twitter-bootstrap

我在S-O各处搜索了这个问题的答案,但似乎没有一个对我的具体案例起作用。如果这可能是重复的,请原谅我。

我尝试做的是将我的JSON数据插入模式(使用UI-Bootstrap),但我一直在遇到麻烦。我尝试了通过谷歌搜索找到的许多不同的例子,但没有显示数据。

我为模态窗口创建了一个新视图,代码如下所示:

<div ng-controller="MainCtrl"class="modal-header">
            <h3 class="modal-title">More Info</h3>
        </div>
        <div class="modal-body">
        <p>{{user.username}}</p>
            <ul>
                <li ng-repeat="user in users">
                    <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ user.username }}</a>
                </li>
            </ul>
            Selected: <b>{{ user.username }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>

在main.html(主视图)上调用此模态,如下所示:

<md-scroll-shrink><header sticky layout="row" layout-xs="column" class="header">
  <h3 class="text-center affix-top ">User Directory</h3>
</header>
</md-scroll-shrink>


<div layout="row" layout-md="column">


    <div flex>
      <md-card id="card" ng-repeat="user in users">
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">{{user.name}}</span>
            <span  class="glyphicon glyphicon-phone"></span>
            <span class="md-subhead">{{user.email}}</span>
          </md-card-title-text>
          <md-card-title-media>

          </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
        <button  ng-click="open()" class="btn btn-success">More Info</button>
        </md-card-actions>
      </md-card>
    </div>







</div>

最后这里是主控制器(main.js):

'use strict';

/**
 * @ngdoc function
 * @name peapodTestApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the peapodTestApp
 */

angular.module('peapodTestApp')
  .controller('ModalInstanceCtrl',function($scope,$uibModalInstance,UserService){
  $scope.ok = function () {
    $uibModalInstance.close();
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
  })

  .controller('MainCtrl', function ($scope,UserService,$uibModal,$log) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma',
      'ngMaterial'
    ];

    $scope.users = UserService;
    $scope.animationsEnabled = true;

  $scope.open = function (UserService,size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'views/modal.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        user: function () {
          return $scope.user;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };



  })
  .service('UserService',function(){
    var user = [{

    "id": 1,

    "name": "Leanne Graham",

    "username": "Bret",

    "email": "Sincere@april.biz",

    "address": {

        "street": "Kulas Light",

        "suite": "Apt. 556",

        "city": "Gwenborough",

        "zipcode": "92998­3874",

        "geo": {

            "lat": "­37.3159",

            "lng": "81.1496"

        }

    },

    "phone": false,

    "website": "hildegard.org",

    "company": {

        "name": "Romaguera­Crona",

        "catchPhrase": "Multi­layered client­server neural­net",

        "bs": "harness real­time e­markets",



    }

},

{

    "id": 2,

    "name": "Ervin Howell",

    "username": "Antonette",

    "email": "Shanna@melissa.tv",

    "address": {

        "street": "Victor Plains",

        "suite": "Suite 879",

        "city": "Wisokyburgh",

        "zipcode": "90566­7771",

        "geo": {

            "lat": "­43.9509",

            "lng": "­34.4618"

        }

    },

    "phone": "010­692­6593 x09125",

    "website": "anastasia.net",

    "company": {

        "name": "Deckow­Crist",

        "catchPhrase": "Proactive didactic contingency",

        "bs": "synergize scalable supply­chains"

    }

},

{

    "id": 3,

    "name": "Clementine Bauch",

    "username": "Samantha",

    "email": "Nathan@yesenia.net",

    "address": {

        "street": "Douglas Extension",

        "suite": "Suite 847",

        "city": "McKenziehaven",

        "zipcode": "59590­4157",

        "geo": {

            "lat": "­68.6102",

            "lng": "­47.0653"

        }

    },

    "phone": "",

    "website": "ramiro.info",

    "company": {

        "name": "Romaguera­Jacobson",

        "catchPhrase": "Face to face bifurcated interface",

        "bs": "e­enable strategic applications"

    }

},

{

    "id": 4,

    "name": "Patricia Lebsack",

    "username": "Karianne",

    "email": "Julianne.OConner@kory.org",

    "address": {

        "street": "Hoeger Mall",

        "suite": "Apt. 692",

        "city": "South Elvis",

        "zipcode": "53919­4257",

        "geo": {

            "lat": "29.4572",

            "lng": "­164.2990"

        }

    },

    "phone": "493­170­9623 x156",

    "website": "kale.biz",

    "company": {

        "name": "Robel­Corkery",

        "catchPhrase": "Multi­tiered zero tolerance productivity",

        "bs": "transition cutting­edge web services"

    }

},

{

    "id": 5,

    "name": "Chelsey Dietrich",

    "username": "Kamren",

    "email": "Lucio_Hettinger@annie.ca",

    "address": {

        "street": "Skiles Walks",

        "suite": "Suite 351",

        "city": "Roscoeview",

        "zipcode": "33263",

        "geo": {

            "lat": "­31.8129",

            "lng": "62.5342"

        }

    },

    "phone": "(254)954­1289",

    "website": "demarco.info",

    "company": {

        "name": "Keebler LLC",

        "catchPhrase": "User­centric fault­tolerant solution",

        "bs": "revolutionize end­to­end systems"

    }

},

{

    "id": 6,

    "name": "Mrs. Dennis Schulist",

    "username": "Leopoldo_Corkery",

    "email": "Karley_Dach@jasper.info",

    "address": {

        "street": "Norberto Crossing",

        "suite": "Apt. 950",

        "city": "South Christy",

        "zipcode": "23505­1337",

        "geo": {

            "lat": "­71.4197",

            "lng": "71.7478"

        }

    },

    "phone": "",

    "website": "ola.org",

    "company": {

        "name": "Considine­Lockman",

        "catchPhrase": "Synchronised bottom­line interface",

        "bs": "e­enable innovative applications"

    }

},

{

    "id": 7,

    "name": "Kurtis Weissnat",

    "username": "Elwyn.Skiles",

    "email": "Telly.Hoeger@billy.biz",

    "address": {

        "street": "Rex Trail",

        "suite": "Suite 280",

        "city": "Howemouth",

        "zipcode": "58804­1099",

        "geo": {

            "lat": "24.8918",

            "lng": "21.8984"

        }

    },

    "phone": "210.067.6132",

    "website": "elvis.io",

    "company": {

        "name": "Johns Group",

        "catchPhrase": "Configurable multimedia task­force",

        "bs": "generate enterprise e­tailers"

    }

},

{

    "id": 8,

    "name": "Nicholas Runolfsdottir V",

    "username": "Maxime_Nienow",

    "email": "Sherwood@rosamond.me",

    "address": {

        "street": "Ellsworth Summit",

        "suite": "Suite 729",

        "city": "Aliyaview",

        "zipcode": "45169",

        "geo": {

            "lat": "­14.3990",

            "lng": "­120.7677"

        }

    },

    "phone": "586.493.6943 x140",

    "website": "jacynthe.com",

    "company": {

        "name": "Abernathy Group",

        "catchPhrase": "Implemented secondary concept",

        "bs": "e­enable extensible e­tailers"

    }

},

{

    "id": 9,

    "name": "Glenna Reichert",

    "username": "Delphine",

    "email": "Chaim_McDermott@dana.io",

    "address": {

        "street": "Dayna Park",

        "suite": "Suite 449",

        "city": "Bartholomebury",

        "zipcode": "76495­3109",

        "geo": {

            "lat": "24.6463",

            "lng": "­168.8889"

        }

    },

    "phone": "(775)976­6794 x41206",

    "website": "conrad.com",

    "company": {

        "name": "Yost and Sons",

        "catchPhrase": "Switchable contextually­based project",

        "bs": "aggregate real­time technologies"

    }

}

];

    return user;
  })

此外,BTW我尝试更新之前的问题,但从未收到过回复。如果有人有任何提示,我将非常感谢帮助。感谢

更新不幸的是,我仍然无法让我的模态显示我的JSON值,我已经尝试了建议的修复程序,但仍然没有...任何其他建议都会有所帮助。感谢

1 个答案:

答案 0 :(得分:0)

modalInstanceCtrl需要接收解析变量

.controller('ModalInstanceCtrl',function($scope,$uibModalInstance,user){
    $scope.user = user;

    $scope.ok = function () {
        $uibModalInstance.close();
    };

    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };
})

注入已解析的用户而不是userService