Question

很多次回答了，但是我仍然不明白我的代码有什么问题。我是JavaScript和Angular的新手，所以请帮助我为什么会收到此错误。

这是我的HTML和JavaScript代码。我试图根据用户输入值创建一个数组，在表中显示它们，然后插入一个按钮来计算列表中最便宜和最昂贵的商品。现在，由于角度误差，我一直无法在数组中获取用户输入。

var listaArr = [];
var app = angular.module("ostosLista", []);
app.controller("listaKontrolleri", ['$scope', function($scope) {
    $scope.listaArr = [{"syotettyTuote": "syotettyHinta"}];
}]);

var syotettyTuote = $scope.document.getElementById("tuote");
var syotettyHinta = $scope.document.getElementById("hinta");

function lisaaListaanTuote(){
    $scope.listaArr.push($scope.syotettyTuote.value);
}
function lisaaListaanHinta(){
    $scope.listaArr.push($scope.syotettyHinta.value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en-US" ng-app="ostosLista">
    <head>
        <title>Budjetti</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body ng-controller="listaKontrolleri">
       <h1>Listasi</h1>
       <table>
       <tr ng-repeat="syotettyTuote and syotettyHinta in listaArr">
           <td>{{ $index + 1 }}</td>
           <td>{{ x.syotettyTuote }}</td>
           <td>{{ x.syotettyHinta }}</td>
       </tr>
       </table>
       <form>
           <fieldset>
               <legend>Listaan</legend>
               <input id="tuote" type="text" ng-model="syotettyTuote" placeholder="Tuote" />
               <button ng-click="lisaaListaanTuote()">Laita listaan</button>
               <input id="hinta" type="parseInt" ng-model="syotettyHinta" placeholder="Hinta" />
               <button ng-click="lisaaListaanHinta()">Laita listaan</button>
            </fieldset>
        </form>
        <h2>Listasi kallein ja halvin tuote</h2>
        <button id="laske" onclick="laske()" placeholder="Laske kallein ja halvin tuote">Laske kallein         ja halvin</button>
        <textarea id="kallein" placeholder="Kallein" ></textarea>
        <textarea id="halvin" placeholder="Halvin"></textarea>
    </body>
</html>

Answer 1

您在$scope之外使用了Controller对象，代码语言有点难以理解。

但是，我已经从您的代码中添加了简单的示例。

var listaArr = [];
var app = angular.module("ostosLista", []);
app.controller("listaKontrolleri", ['$scope', function($scope) {
    $scope.listaArr = [];
	
	$scope.lisaaListaanTuote = function(){
  
    var val = angular.element(document.querySelector("#tuote")).val();
      
      console.log(val);
    
		$scope.listaArr.push(val);
	}
	
}]);

<!DOCTYPE html>
<html lang="en-US" ng-app="ostosLista">
    <head>
        <title>Budjetti</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body ng-controller="listaKontrolleri">
       <h1>Listasi</h1>
       <table>
       <tr ng-repeat="item in listaArr">
           <td>{{item}}</td>
       </tr>
       </table>
       <form>
           <fieldset>
               <legend>Listaan</legend>
               <input id="tuote" type="text" placeholder="Tuote" />
               <button ng-click="lisaaListaanTuote()">Laita listaan</button>
            </fieldset>
        </form>
       
    </body>
</html>

未定义ReferenceError角度

1 个答案: