Question

我正在使用html元素来调用包含输入的模板。这会在页面上多次使用。如何使用属性和/或索引区分它们以填充每个相应的ng模型？

JS代码：

angular.module('myModule').directive('address', function () {
  return{
    restrict: 'E',
    replace: true,
    templateUrl: '/address.tpl.html',
    scope: {
      address: '=',
      form: '='
    },
    link: function (scope, el, attrs) {
      scope.isRequired = attrs.optional === undefined;
    }
  };
});

主页HTML代码：

<p>My Address</p>      <address></address>
<p>Extra Address 1</p> <address></address>
<p>Extra Address 2</p> <address></address>
<p>Your Address</p>    <address></address>

可以有任意数量的额外地址。

Address.tpl.html HTML code：

  <ng-form name="addressForm">
    <label>Postcode:</label> 
    <input name="postcode" type="text" ng-model="address.postcode"/>
  </ng-form>

显然，这并没有帮助我获得值，因为输入的每个实例都将具有相同的ng-model：$ scope.address.postcode。理想情况下，我希望在address元素中放置一个属性，这意味着我可以将ng-model的名称定义为address.myAddress.postcode或address.extraAddress6.postcode。

编辑：既然我有答案，我注意到必要的代码已经存在于JS文件中。那个地址：'='是我需要的数据绑定。

主页HTML代码（新代码）：

<p>My Address</p>      <address address="my"></address>
<p>Extra Address 1</p> <address address="extra1"></address>
<p>Extra Address 2</p> <address address="extra2"></address>
<p>Your Address</p>    <address address="your"></address>

我现在可以使用$ scope.my.postcode和$ scope.extra1.postcode等访问ng-model =“address.postcode”的范围值。

Answer 1

您是否可以为每个地址标记添加一个属性并使用它来区分它们？

    <p>My Address</p>      <address type="'my'"></address>
    <p>Extra Address 1</p> <address type="'extra1'"></address>
    <p>Extra Address 2</p> <address type="'extra2'"></address>
    <p>Your Address</p>    <address type="'your'"></address>

scope: {
      address: '=',
      form: '=',
      type: '&'

    },
    link: function (scope, el, attrs) {
      scope.isRequired = attrs.optional === undefined;
      switch(attrs.type) {
          case 'my':
          ...

Answer 2

您可以在此实例中使用ng-repeat。听起来你想要任意数量的额外地址。所以这可能会有所帮助：

$scope.extraAddresses = [ 'address1', 'address2', 'address3', 'address4' ];

然后在你的HTML中：

<p ng-repeat="address in extraAddresses">{{address}}</p>

如果您希望地址包含额外数据。将模型更新为对象数组：

$scope.extraAddresses = [ 
   {
      "address": "address1",
      "postalcode": "06060"
   }
];

然后在你的HTML中：

<p ng-repeat="address in extraAddresses">{{address.address}}, {{address.postalcode}}</p>

换句话说，基本上将所有内容视为一个对象数组，并使用ng-repeat进行迭代。

Answer 3

如果我是你，我会首先将所有初始化数据放入一个JSON对象中。也许你可以：

ADDRESS_JSON_OBJECT = [
    { address1: "1234 Fake St.", country: "Blahnada" },
    { address1: "1234 Fake St.", country: "Blahmerica" }
];

在你的应用程序模块中定义一个'value'，如下所示：

myApplication = angular.module( ... ).value('addresses', ADDRESS_JSON_OBJECT)

您的地址控制器现在将依赖于此数据：

myControllerModule = 
    angular.module( ... )
    .controller('AddressController', 
        ['$scope', 'addresses', function ($scope, addresses) {
        //don't do the init here....
        }
    );

现在，在每个HTML模板中，您都可以使用'ng-init'谓词来初始化值：

<ng-form name="addressForm">
    <label>Postcode:</label> 
    <input ng-init="address = addresses[0]" name="postcode" type="text" ng-model="address.postcode"/>
</ng-form>

我实际上没有测试过这段代码，但我相信这个一般的想法会起作用。我之前使用过ng-init来引导输入。

如何将变量传递给AngularJS模板

3 个答案: