0
У меня есть угловая модель, которая получает данные через вызов JSON и показывает следующее. После создания второго JSON, как я могу обновить этот список.Обновление данных после вызова JSON в Angular
<ul ng-repeat="x in names">
<a href="{{x.webLink}}"><h3> {{ x.name }} </h3></a>
<h4> {{ x.place }} </h4>
<p> <img ng-src="{{x.image}}"> </p>
</ul>
Я впрыснуть данные первоначально через это:
$http.get("").success(function (response) {$scope.names = courseParsed;});
Вы можете проверить его ниже. http://findcourse.parseapp.com/
Я добавляю полный код, чтобы сделать его проще, через "выбора и поиска" Button ($ scope.names [0] .name = "тест"; $ scope.names.splice (1, 1)), Я пытаюсь изменить список, хотя он работал один раз, теперь он вообще не работает.
var app = angular.module('myApp', []);
var queryParam ={};
app.controller('customersCtrl', function($scope, $http, $q) {
Parse.$ = jQuery;
Parse.initialize("mvLeLP1wbRJW24ESjaUEgPueWHpMLNZNvwLnTTJW", //"applicationId":
"NqwHrO9MjC9uLgqu4zNIi6u9TC19GVRbMmNxXTag"); //JavaScript Key
var Article = Parse.Object.extend('coursesParse');
$scope.master = {};
$scope.update = function(user) {
//$scope.master = angular.copy(user);
//alert(user.degree+" "+user.industry);
//alert($scope.names[0].name);
$scope.names[0].name = "test";
$scope.names.splice(1, 1);
};
var myLat = -37.875773;
var myLng = 145.087829;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getPosition);
} else {
alert("Please allow using your location to see the courses around you!");
}
function getPosition(position) {
myLat = position.coords.latitude;
myLng = position.coords.longitude;
var mapOptions = {
center: new google.maps.LatLng(myLat, myLng),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
var ArticleDfd = $q.defer();
var queryInitial = new Parse.Query(Article);
//queryInitial.equalTo('name', 'Electrical Supply');
var geoPoint = ({latitude: myLat, longitude: myLng});
queryInitial.near("coords", geoPoint);
queryInitial.limit(4);
queryInitial.find().then(function (data) {
var courseParsed = [];
for (var i = 0; i < data.length; i++) {
courseParsed[i] = {
"name": data[i].get('name'),
"description": data[i].get('description'),
"length": data[i].get('length'),
"place": data[i].get('place'),
"comment": data[i].get('comments'),
"image": data[i].get('images'),
"webLink": data[i].get('weblink'),
"xCor": data[i].get('coords').latitude,
"yCor": data[i].get('coords').longitude
};
//for (var prop in courseParsed[i]) {alert(prop + " = "+ courseParsed[i][prop])};
}
for(var i=0;i<courseParsed.length;i++){
//alert(courseParsed[i]['xCor'], courseParsed[i]['yCor']);
//alert(courseParsed[i]['xCor']);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(courseParsed[i]['xCor'], courseParsed[i]['yCor']),
//icon: "img/icon.png",
map: map,
title: 'Hello World!'
});
}
ArticleDfd.resolve(data);
$http.get("").success(function (response) {$scope.names = courseParsed;});
}, function (error) {
ArticleDfd.reject(data);
});
ArticleDfd.promise
.then(function (article) {
$scope.currentArticle = article;
})
.catch(function (error) {
//do something with the error
});
});
HTML страницы:
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.13.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="js/controllers.js"></script>
<script src="js/effect.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="css/app.css">
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div id="map">Loading...</div>
<div id="searchForm" ng-controller="customersCtrl">
<form novalidate>
<select type="text" ng-model="user.degree">
<option>Diploma</option><option>Advanced Diploma</option><option>Certificate III</option>
</select>
<select type="text" ng-model="user.industry">
<option>Finance</option><option>Construction</option><option>Energy and Power</option>
</select>
<!-- Gender: <input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female<br />
<input type="button" ng-click="reset()" value="Reset" />
<pre>user = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>-->
<input type="submit" ng-click="update(user)" value="Select and Search" />
</form>
</div>
<ul ng-repeat="x in names">
<a href="{{x.webLink}}"><h3> {{ x.name }} </h3></a>
<h4> {{ x.place }} </h4>
<p> <img ng-src="{{x.image}}"> </p>
</ul>
<!--<p> {{ x.length + ', ' + x.description }}
<p> {{ x.comment }} </p> </p> -->
</div>
</body>
</html>
Я не понимаю. Просто обновление значения '$ scope.names' не будет работать? –
Я не вижу достаточно кода для определения вашей проблемы, но вы можете попробовать '$ scope. $ Apply();' после обновления до '$ scope.names'. «Ng-repeat» должен обновляться автоматически, но если вы выполняете обновление вне цикла, вам может потребоваться запросить дайджест. – hally9k