在 AngularJS 脚本中获取 HTML 元素数据答案

【问题标题】：Get HTML element data in AngularJS script在 AngularJS 脚本中获取 HTML 元素数据
【发布时间】：2015-11-10 11:01:56
【问题描述】：

我是 AngularJS 的新手，正在尝试设计一个包含两个文本字段和两个单选按钮的页面。

第一个文本字段用于当前地址，然后是单选按钮（一个表示是，第二个表示否），最后一个组件将是永久地址文本字段。首先，用户将在当前地址文本字段中输入值，然后如果用户选择是单选按钮，则应将数据从当前地址复制到永久地址文本字段，如果用户选择否，则不应执行任何操作。下面是我写的示例代码：

*<input type="text" name="cAddress" ng-model="cAddress" required/>
<input type="radio" name="opt" ng-click="copyAddress(true)" />
<input type="radio" name="opt" ng-click="copyAddress(false)" />
<input type="text" name="pAddress" ng-model="pAddress" required/>*

以下是控制器内部的脚本代码：

$scope.copyAddress = function(flag) {
   if(flag) {
      $scope.pAddress = $scope.cAddress;
   }
};

当我尝试在控制台中打印 $scope.cAddress 和 $scope.pAddress 值时，它显示为未定义。即使$scope 也没有cAddress 和pAddress。

因此，主要问题是我没有在 AngularJS 控制器中获取元素数据

请找到 plunker 网址： http://plnkr.co/edit/Ub2VEn01HxwDpnCg4tLi?p=preview 单击下一步导航到第二个选项卡，在那里您将找到是和否单选按钮来复制数据。

我已将代码最小化，请查看。要了解流程，您可以阅读 README 文件。 http://plnkr.co/edit/TzJsZIRxAyTuFdCXLFFV?p=preview

【问题讨论】：

奇怪.. 你能再给我看一些 html.. 控制器是否在相关的tag 中正确设置，这个表格在tag..
您违反了始终使用ng-model 中的对象的黄金法则。对象有继承，原语没有
你能创建一个 jsfiddle 吗？
@charlietfl 我认为这不是问题，但它仍然是一个很好的观点..
@Minato 很可能是问题所在。如果涉及子范围，它将解释 OP 的问题

标签： javascript html angularjs element

【解决方案1】：

尝试使用另一个范围对象。

也就是说，创建一个范围对象并为每个输入添加属性，例如，

$scope.myObject = {}; // Empty scope variable
$scope.myObject.cAddress = ""; // initialize your model for the input.

现在你应该使用这个变量作为你的输入。

<input type="text" name="cAddress" ng-model="myObject.cAddress" required/>

试试这个。可能对你有帮助。

【讨论】：

兄弟实际上问题中给出的代码是正确的。

【解决方案2】：

HTML代码：

<body ng-controller='Maincontroller'>
  <input type="text" name="cAddress" ng-model="cAddress" />
  <input type="radio" name="opt" ng-click="copyAddress(true)" />
  <input type="radio" name="opt" ng-click="copyAddress(false)" />
  <input type="text" name="pAddress" ng-model="pAddress" />
</body>

控制器代码：

 var app = angular.module('main', []);
app.controller('Maincontroller', ["$scope",
  function($scope) {

    $scope.copyAddress = function(flag) {
      if (flag) {
        $scope.address1 = $scope.address;
      } else {
        $scope.address1 = "";
      }
    };
  }
]);

【讨论】：

嗨，Dark Army，我又试了一次，它在我在下面的 plunker 中创建的示例示例中工作：plnkr.co/edit/dq6Qj7UWxNwGVGsnK6Xy?p=preview 但是，它不适用于我的另一个练习示例，请签入在 plunker 网址下方：plnkr.co/edit/Ub2VEn01HxwDpnCg4tLi?p=preview
@RaviNain:如果你能告诉我找哪个js和html会节省很多时间和行号
regCtrl.js：第 113 行 regAddressAndContact.html：第 1 行和第 34 行与我的问题相关
我已经最小化了这个 plunk 上的代码。 plnkr.co/edit/TzJsZIRxAyTuFdCXLFFV?p=preview