Question

ave创建了一个应用程序来显示我的mysql数据库中的所有用户，一切正常但是当我的php代码返回包含数据的json时，范围是更新但是没有得到任何显示

<!Doctype html>
<html> 
     <head>
	     <title>Simple Dynamic Score Board | By Kascique Lowmans</title>
		 <meta charset="utf-8"/>
                 <link rel="stylesheet" href="style.css"/>
	     <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
		 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	   </head>
	   <script>

	         var webapp = angular.module('myapp', []);
			 webapp.controller('myusers', function($scope, $http){
 			      $scope.users = [];
				$http.get("selectdata.php").then(function(response){
				     $scope.users = response.data;
                                     $scope.$apply();
                                     alert($scope.users);
                                     
				 });
                               // $scope.$watch("users", function(){ alert('users scope changed');});
				
			 });
			 
			 
			 
	     </script>
	 <body data-ng-app="myapp" >
	  <div class="control-group">
			<h1>Select a user</h1>
			  <div data-ng-controller="myusers" >
				<label class="control control--radio" data-ng-repeat="x in users"><span>{{$index + 1}}</span> {{ x.firstname +' '+x.lastname }} <b>{{ x.score}}</b>
					<input type="radio" name="radio"/>
					<div class="control__indicator"></div>
				</label><br/>
                                <h1 id="trail"></h1>
				<button ng-click="click()">+ Add score</button>
			  </div>
			<footer>
                &copy; copyright <a href="http://www.kasciquelowmans.ml/">Kascique Lowmans</a>
            </footer>
	   </div>
	 </body>
</html>

Answer 1

您尚未为ng-model分配任何内容。如果我错了，请纠正我，但我在整个代码中都没有看到任何ng模型。

Answer 2

您在代码中犯了两个错误

1）不正确的HTML。头标签包括身体标签。 2）你不应该从$ http promise回调中调用$ scope.apply，因为它将由Angular调用。

下面是一个略有变化的剪辑，它的工作原理。

＆＃13;

var webapp = angular.module('myapp', []);
			 webapp.controller('myusers', function($scope, $http){
 			 $scope.users = [];
				$http.get("https://randomuser.me/api/?results=10").then(function(response){
                     $scope.users = response.data.results;
                                     
				 });
				 $scope.regUser = function(index){ 
					     $scope.thereguser = index;
				 } 

				
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="control-group" data-ng-app="myapp">
			<h1>Select a user</h1>
			  <div data-ng-controller="myusers" >
				<label class="control control--radio" data-ng-repeat="x in users"><span>{{$index + 1}}</span> {{ x.name.first }} <b>{{ x.score}}</b>
					<input type="radio" name="radio"/>
					<div class="control__indicator"></div>
				</label><br/>
                                <h1 id="trail"></h1>
				<button ng-click="click()">+ Add score</button>
			  </div>
			<footer>
                &copy; copyright <a href="http://www.kasciquelowmans.ml/">Kascique Lowmans</a>
            </footer>
	   </div>

＆＃13;

Answer 3

您如何更改范围？通过click（）函数？你可以发布吗？顺便说一下，你不需要$scope.$apply()角度操作（在这种情况下为$ http.get），因为它会自动执行。

我的AngularJS范围未在模型中更新

3 个答案: