2017-03-17 50 views
0

一個只需要恢復(在「myfunction的」)我的變量的名字'我行點擊變量,當我在我的按鈕如何恢復在angularJS

這是我的索引頁

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 


<div ng-app="myApp" ng-controller="customersCtrl"> 

<table> 
    <tr> 
    <th>Nom</th> 
    <th>Pays</th> 
    <th>Ville</th> 
    <th>button</th> 
    </tr> 
    <tr ng-repeat="x in myData"> 
    <td value="{{x.Name}}">{{ x.Name | uppercase }}</td> 
    <td>{{ x.Country }}</td> 
    <td>{{ x.City }}</td> 
    <td><button ng-click="myFunction()">Click me!</button></td> 
    </tr> 
</table> 

</div> 

<script src="Ctrl.js"></script> 

</body> 
</html> 
點擊

,這是我的控制器

var app = angular.module('myApp', []); 
app.controller('customersCtrl', function($scope, $http) { 
    $http.get("customers.php").then(function (response) { 
     $scope.myData = response.data.records; 
     console.log($scope.myData); 
     $scope.myfunction = function(){ 


     } 
    }); 
}); 

,這是我的文件PHP

{ "records":[ {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, {"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"}, {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"}, {"Name":"Around the Horn","City":"London","Country":"UK"}, {"Name":"B's Beverages","City":"London","Country":"UK"}, {"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"}, {"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"}, {"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"}, {"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"}, {"Name":"Bon app'","City":"Marseille","Country":"France"}, {"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"}, {"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"}, {"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"}, {"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}, {"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"} ] } 

在此先感謝您的效應初探,

+0

你嘗試在myFunction()中傳遞'x.Name'如'myFunction(x.Name)' – Pradeepb

回答

0

我覺得你在用自己的方式嘗試這種容易的事情,但沒有得到任何數據在函數內部對控制器,因爲一個錯字:)

你做了的從HTML內部調用函數時出現非常愚蠢的錯誤。您輸入爲myFunction()根據您的控制器代碼,主叫名稱應該是myfunction()

所以,以下的事情完美的作品!

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 


<div ng-app="myApp" ng-controller="customersCtrl"> 

<table> 
    <tr> 
    <th>Nom</th> 
    <th>Pays</th> 
    <th>Ville</th> 
    <th>button</th> 
    </tr> 
    <tr ng-repeat="x in myData"> 
    <td value="{{ x.Name }}">{{ x.Name | uppercase }}</td> 
    <td>{{ x.Country }}</td> 
    <td>{{ x.City }}</td> 
    <td><button ng-click="myfunction(x.Name)">Click me!</button></td> 
    </tr> 
</table> 

</div> 

<script src="Ctrl.js"></script> 

</body> 
</html> 

隨着Ctrl.js像以下...

var app = angular.module('myApp', []); 
app.controller('customersCtrl', function($scope, $http) { 
    $http.get("customers.php").then(function (response) { 
     $scope.myData = response.data.records; 
     console.log($scope.myData); 
     $scope.myfunction = function(Name){ 
      console.log(Name); 
     } 
    }); 
}); 

JavaScript是區分大小寫!

+0

非常感謝,我不知道我的想法在哪裏:D – Gazano