2016-10-25 7 views
0

Я новичок в стеке MEAN, и я пытался создать простую контактную программу. Но ng-repeat в моем index.html не работает. Вот мой код. Файлы в соответствии со структурой файла по умолчанию при условии курьерскимng-repeat не работает в стеке MEAN

index.html

<html ng-app="myApp" xmlns:ng="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>First Application x</title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <!-- Optional theme --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"> </script> 

    </head> 
    <body> 
    <div class="container" ng-controller="AppCtrl"> 
      <h1>Phone Directory</h1> 
      <table class="table"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Email</th> 
        <th>Phone</th> 
        <th>Action</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td><input class="form-control" type="text" placeholder="Enter name"></input></td> 
        <td><input class="form-control" type="text" placeholder="Email"></input></td> 
        <td><input class="form-control" type="text" placeholder="Phone No." ></input></td> 
        <td><button class="btn btn-danger">Add Contact</button></td> 
       </tr> 
       <tr ng-repeat="contact in contactlist"> 
        <td class="info">{{ contact.name }}</td> 
        <td class="info">{{ contact.email }}</td> 
        <td class="info">{{ contact.phone }}</td> 
        <td class="info">{{ contact.phone }}</td> 
       </tr> 
      </tbody> 
      </table> 
    </div> 
    <script src="/javascripts/controllers/controller.js"></script> 
    </body> 
    </html> 

controller.js

var myApp = angular.module('myApp', []); 

    myApp.controller('AppCtrl',['$scope', '$http', function($scope, $http){ 
    $http.get('/contactlist').success(function(response){ 
     $scope.contactlist = response; 
     console.log(response); 
     console.log("Hello World from controller"); 
    }); 

    }]); 

index.js

var express = require('express'); 
    var router = express.Router(); 

    /* GET home page. */ 

    router.get('/', function(req, res, next) { 
    res.render('index', { title: '' }); 
    }); 

    router.get('/contactlist',function(req,res){ 
    person1={ 
     name: 'Tim', 
     email: '[email protected]', 
     phone: '111 111 -1111' 
    }; 
    person2={ 
     name: 'Tim cook', 
     email: '[email protected]', 
     phone: '222 111 -1111' 
    }; 
    person3={ 
     name: 'Tim Baron', 
     email: '[email protected]', 
     phone: '222 333 -1111' 
    }; 
    var contactlist=[person1,person2,person3]; 
    res.json(contactlist); 
    }); 

module.exports = router; 
+1

Вы получаете какую-либо ошибку на консоли? если да, то пожалуйста отправлять –

+0

@ kapil.dev нет ..on консоли я не получаю ошибку –

+0

введите следующий URL-адрес в браузере Уре и дайте мне знать, что отображает локальный: {порт}/ContactList Если порт 3000 например: http: // localhost: 3000/contactlist –

ответ

-1

Хорошо!

Из экспресс-приложения вы передаете строку JSON, поэтому, когда вы получаете вызов ajax, это JSON String, и вам нужно декодировать объект. Это можно сделать с помощью функции JSON.parse().

Замените линию ниже один

$scope.contactlist = JSON.parse(response); 

Надеется, что это решит вашу проблему.

+0

Он уже получил массив в формате JSON. AngularJS может работать с этим JSON напрямую – Weedoze

+0

Спасибо kapil это работает .. –

+0

@ayush welcome :) –

 Смежные вопросы

  • Нет связанных вопросов^_^