我有一个简单的应用程序，它从本地json对象获取数据并将其显示在屏幕上。这部分工作得很好，还有一个功能，你可以填写一个表单来添加一个新元素到json，它也将显示在页面上，但这不起作用。
我可以告诉应该将数据推送到JSON的函数正在工作，因为它的辅助功能是在提交之后清除表单数据。我还在ng-click提交按钮后记录了JSON单击，我可以看到日志条目中添加的新数据，但ng-repeat没有将其添加到页面。
继承人的代码 的index.html
<html>
<head>
<meta charset="utf-8">
<title>AngTest </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="ngCribs" ng-controller="cribsController">
<!-- nav bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Star Wars BnB</a>
</div>
</div>
</nav>
<div class="container">
<!-- Min / Max Price Filter -->
<div class="col-sm-12" id="price-form">
<div class="row price-form-row" ng-if="!addListing">
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon">Min Price</span>
<select name="minPrice" id="minPrice" ng-model="priceInfo.min" class="form-control">
<option value="0">$0</option>
<option value="500">$500</option>
<option value="1000">$1000</option>
<option value="10000">$10,000</option>
<option value="100000">$100,000</option>
<option value="1000000000000">$1,000,000,000,000</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon">Max Price</span>
<select name="maxPrice" id="maxPrice" ng-model="priceInfo.max" class="form-control">
<option value="0">$0</option>
<option value="500">$500</option>
<option value="1000">$1000</option>
<option value="10000">$10,000</option>
<option value="100000">$100,000</option>
<option value="1000000000000">$1,000,000,000,000</option>
</select>
</div>
</div>
</div>
<button
class="btn btn-primary"
ng-click="addListing = !addListing"
ng-show="!addListing"> Add Listing
</button>
<button
class="btn btn-danger"
ng-click="addListing = !addListing"
ng-show="addListing"> Close
</button>
<div class="listing-form" ng-if="addListing">
<h4>Add a Listing</h4>
<div class="row listing-form-row">
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">Name</span>
<input
type="text"
placeholder="Enter a Name"
class="form-control"
ng-model="newListing.name">
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">Price</span>
<input
type="text"
placeholder="Enter a Price"
class="form-control"
ng-model="newListing.price">
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">Address</span>
<input
type="text"
placeholder="Enter a address"
class="form-control"
ng-model="newListing.address">
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">Description</span>
<textarea
type="text"
placeholder="Enter a description"
class="form-control"
ng-model="newListing.description">
</textarea>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">Allegiance</span>
<select
type="select"
name="propertyType"
id="propertyType"
class="form-control"
ng-model="newListing.details.allegiance">
<option value="Empire">Empire</option>
<option value="Rebels">Rebels</option>
<option value="Neutral">Neutral</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">Leader</span>
<input
type="text"
placeholder="Enter a Leader Name"
class="form-control"
ng-model="newListing.details.leader">
</input>
</div>
</div>
</div>
<button class="btn btn-primary listing-button" ng-click="addCrib(newListing)" ng-show="addListing">Add </button>
<pre> {{newListing | json}} </pre>
</div>
</div>
</div>
<div class="container">
<p id="desclaimer">(note: all prices are in Galactic Credits although some (Jabba) may accept barter)</p>
<div class="col-sm-4" ng-repeat="crib in cribs | cribsFilter:priceInfo"> <!--pass in priceInfor arg into cribsFilter(listing argument is assigned to the crib in crib as the first argument in a filter is always the current ng-repeat obj) -->
<div class="thumbnail">
<img class="thumbPic" ng-src="{{crib.image}}.jpg" alt="">
<div class="caption">
<div ng-hide="showDetails === true">
<h3>{{crib.name}}</h3>
<p><i class="glyphicon glyphicon-home"></i><strong>Address: </strong>{{crib.address}}</p>
<p><i class="glyphicon glyphicon-tag"></i><strong>Price: </strong>{{crib.price | currency}}</p>
</div>
<button class="btn btn-xs btn-success" ng-hide="showDetails === true" ng-click="showDetails = !showDetails">
Details
</button>
<button class="btn btn-xs btn-danger" ng-show="showDetails === true" ng-click="showDetails = !showDetails">
Details
</button>
<div class="deatils" ng-show="showDetails === true" ng-click="showDetails = !showDetails">
<h4>
<span class="">Allegiance: <p>{{crib.details.allegiance}}</p></span><br>
<span class="">Leader: <p>{{crib.details.leader}}</p></span>
</h4>
<p><strong>Description: </strong>{{crib.description}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
<footer>
<script src="js/vendor/angular.min.js"></script>
<script stc="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/CribsController.js"></script>
<script src="js/services/cribsFactory.js"></script>
<script src="js/filters/cribsFilter.js"></script>
</html>
<!-- http://localhost:8888/AngTest/ -->
控制器
app.controller('cribsController', ['$scope','cribsFactory', function($scope, cribsFactory) {
$scope.$watch.cribs=[];
$scope.priceInfo = { // set default date for priceInfo so that page is not blank on load
min: 0,
max: 1000000000000
}
$scope.addCrib = function(newListing) {
if(newListing) {
newListing.image = "img/swdefault"; //set default listing image
$scope.cribs.push(newListing); //push data into new listing
$scope.newListing = {}; // clear newlisting field
console.log($scope.cribs);
}
};
cribsFactory.success(function(data){
$scope.cribs = data;
});
}]);
这是指向git hub的链接：https://github.com/ericbezanson/StarWarsBnB 和github页面来查看问题：https://ericbezanson.github.io/StarWarsBnB/
任何帮助都会非常感激。谢谢！