Question

我刚刚开始研究Angular。请考虑以下简单模板：

<div ng-app ng-init="qty=1;cost=2">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" data-ng-model="qty">
  </div>
  <div>
    Costs: <input type="number" min="0" data-ng-model="cost">
  </div>
  <div>
    <b>Total:</b> {{qty * cost | currency}}
  </div>
</div>

属性值，例如qty和cost必须存储在某些变量中，不是吗？ 哪些以及如何通过控制台访问它们？

Answer 1

在您的js文件中，您可以使用

访问它们

$scope.qty和$scope.cost

例如：

将您的ng-app标记为myApp并添加ng-controller

<div ng-app='myApp' ng-controller = 'myController' ng-init="qty=1;cost=2">

使用以下内容

创建名为app.js的js文件

var myApp = angular.module('myApp',[]);
myApp.controller('myController', function($scope)
{
    console.log($scope.qty);
    console.log($scope.cost);
});

您可以在控制台中看到数量和费用

Answer 2

您必须创建一个控制器并在那里存储这些值。

在您的JS文件中

var app = angular.module('MyApp');
app.controller('MyController', ['$scope', function($scope){
    $scope.qty = 1;
    $scope.cost = 2;
}]);

在您的HTML中

<div ng-app="MyApp" ng-controller="MyController">
   <b>Invoice:</b>
   <div>
       Quantity: <input type="number" min="0" data-ng-model="qty">
   </div>
   <div>
       Costs: <input type="number" min="0" data-ng-model="cost">
   </div>
   <div>
       <b>Total:</b> {{qty * cost | currency}}
   </div>
</div>

第二次查询 - detailed post on checking scope variables in Console.

Answer 3

AngularJS app中声明的所有变量都存储在$ scope中，您可以通过控制器中的 console.log（$ scope.qty）访问它们。

但是，当您在模板中声明它时，HTML已经呈现JS已经加载，因此控制台返回＆＃34; undefined＆＃34;。要理解这个概念，请尝试：

Router::prefix('admin', function ($routes) {
    // All routes here will be prefixed with `/admin`
    // And have the prefix => admin route element added.
    $routes->fallbacks('DashedRoute');
});

AngularJS属性值

3 个答案: