Список Angularjs, не обновляющийся при отправке формы с помощью MEAN

Какой-то новый для стека MEAN. В настоящее время я перерабатываю небольшое приложение, которое я сделал через кодовое училище, чтобы быть полноценным стеком MEAN. приложение создано можно здесь Code School app Список Angularjs, не обновляющийся при отправке формы с помощью MEAN

видели Переписывая приложение с использованием стека MEAN после отправки формы я должен обновить страницу, чтобы увидеть город добавлен в список. Что мне нужно исправить, поэтому мне не нужно обновлять страницу для нового элемента, который будет добавлен в список? Если я отсутствует какой-либо соответствующий код ниже вот мой мерзавец ступица ссылка git hub link

Вот мой код:

angular.module('Cityapp').controller('CityIndexController', function(City, $scope){ 
$scope.cities = City.query(); 
window.sc = $scope; 

}); 

angular.module('Cityapp').controller('CityCreateController', function(City, $scope, $http){ 
$scope.city = new City(); 
$scope.saveCity = function(city){ 
$http({ 
    method: 'POST', 
    url: '/city', 
    data: city}) 
.success(function(data, status, headers, config){ 

console.log($scope.city); 
console.log(data); 
console.log($scope.city); 
}). 
error(function(data,status,headers,config){ 

jQuery('.alert').show(); 
console.log('nope'); 
}); 
}; 

}); 


    <form ng-controller="CityCreateController"> 
<legend> New City</legend>  
    <input for="City-group" name="City" id="City" type="text" ng-model="city.city" placeholder="City Name"> 
    <input for="City-group" name="desc" id="desc" type="text" ng-model="city.desc" placeholder="Description"> 
<input type="submit" class="btn btn-default" ng-click="saveCity(city)"/> 
</form> 



<ul ng-controller="CityIndexController" class="city-list"> 
    <li ng-repeat="city in cities"> 
    <a href="#"> 
     {{city.city}}</a></li> 
</ul>

источник

2015-07-18 jminterwebs

Действительно ли 'data' выглядит правильно в обратном вызове' success'? –

«Объект {город:« Test City », desc:« Test », id: 3}« это то, что возвращает console.log с успехом. Идентификатор добавляется через задний конец. – jminterwebs

Пожалуйста, покажите нам свой шаблон. – Chev

Это должно выглядеть примерно так, что

;(function() { 
 
    function Cities($http) { 
 
    function City() { 
 
     
 
    } 
 
    
 
    City.prototype.save = function() { 
 
     return $http.post('/api/city', this); 
 
    }; 
 
    
 
    City.cities = []; 
 
    
 
    City.add = function(city) { 
 
     city.save().then(function() { 
 
     City.cities.push(city); 
 
     }); 
 
    }; 
 
    
 
    City.getAll = function() { 
 
     $http.get('/api/cities').then(function(response) { 
 
     City.cities = response.data.map(function(data) { 
 
      return new City(data); 
 
     }); 
 
     
 
     return cities; 
 
     }); 
 
    }; 
 
    
 
    return City; 
 
    } 
 
    
 
    function CityCreateController(Cities) { 
 
    var mv = this; 
 
    
 
    mv.city = new Cities(); 
 
    
 
    mv.saveCity = function() { 
 
     Cities.add(mv.city); 
 
    }; 
 
    } 
 
    
 
    function CityIndexController($scope, Cities) { 
 
    var mv = this; 
 
    
 
    $scope.$watchCollection(function() { 
 
     return Cities.cities; 
 
    }, function(cities) { 
 
     mv.cities = cities || []; 
 
    }); 
 
    
 
    Cities.getAll(); 
 
    } 
 
    
 
    angular 
 
    .module('app', []) 
 
    .factory('Cities', ['$http', Cities]) 
 
    .controller('CityCreateController', ['Cities', CityCreateController]) 
 
    .controller('CityIndexController', ['$scope', 'Cities', CityIndexController]); 
 
})();

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <meta charset="utf-8"> 
 
</head> 
 
<body ng-app="app"> 
 
    <form ng-controller="CityCreateController as mv"> 
 
    <legend> New City</legend>  
 
    <input for="City-group" name="City" id="City" type="text" ng-model="mv.city.city" placeholder="City Name"> 
 
    <input for="City-group" name="desc" id="desc" type="text" ng-model="mv.city.desc" placeholder="Description"> 
 
    <input type="submit" class="btn btn-default" ng-click="mv.saveCity()"/> 
 
    </form> 
 
    
 
    <ul ng-controller="CityIndexController as mv" class="city-list"> 
 
    <li ng-repeat="city in mv.cities"> 
 
    <a href="#"> 
 
     {{city.city}}</a></li> 
 
    </ul> 
 
    
 
</body> 
 
</html>

источник

2015-07-19 03:17:11

Обнаружено простое исправление. – jminterwebs

Найдено простых исправлений

angular.module('Cityapp').controller('CityCreateController', function(City, $scope, $http){ 
$scope.cities = City.query(); 

$scope.city = new City(); 


$scope.saveCity = function(city){ 
$http({ 
    method: 'POST', 
    url: '/city', 
    data: city}) 
.success(function(data, status, headers, config){ 

$scope.cities.push({city: $scope.city.city, 
        desc: $scope.city.desc}); 



}). 
error(function(data,status,headers,config){ 

jQuery('.alert').show(); 
console.log('nope'); 
}); 
}; 

});

Просто добавил

$scope.cities.push({city: $scope.city.city, 
        desc: $scope.city.desc});

к .success. Работы вроде бы должны. Теперь о моей следующей проблеме.

источник

2015-08-13 03:27:26 jminterwebs

Список Angularjs, не обновляющийся при отправке формы с помощью MEAN

ответ

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