Question

我的页面中有元素被ASP.Net MVC重复呈现。（我需要为SEO目的这样做。）

在这些元素中，我希望有一个受AngularJS约束的文本字段。

有办法做到这一点吗？

在下面的代码中，例如，第二个和第三个文本字段甚至不允许我输入任何内容。是因为我没有正确初始化数组，还是语法有问题？

<input type="text" ng-model="sometext" />
<input type="text" ng-model="sometextArray1[1]" />
<input type="text" ng-model="sometextArray2[1].value" />


<h1>Hello #1 {{ sometext }}</h1>
<h1>Hello #2 {{ sometextArray1[1] }}</h1>
<h1>Hello #3 {{ sometextArray2[1].value }}</h1>

Answer 1

如果你试图让angular隐式地为你实例化数组，我不认为数组是可赋值的。如果您使用控制器来实例化您的数组，这应该工作。我创造了一个小提琴。

JsFiddle

<强> HTML

<div ng-app="mod">  
    <section ng-controller="Ctrl">
        <input type="text" ng-model="someArray[0].value" ng-change="logValue(0)" />
        <input type="text" ng-model="someArray[1].value" ng-change="logValue(1)"/>
        <input type="text" ng-model="someArray[2].value" ng-change="logValue(2)"/>
        <input type="text" ng-model="someArray[3].value" ng-change="logValue(3)"/>
    </section>
</div>

<强>代码：

(function () {
    var app = angular.module('mod', []);

    app.controller('Ctrl', ['$scope', '$log', function ($scope, $log) {
        $scope.someArray = [
            {value: "value 0"}, 
            {value: "value 1"},
            {value: "value 2"}, 
            {value: "value 3"}
        ];

        $scope.logValue = function (index) {
            $log.info($scope.someArray[index]);
        }
    }]);
})();

Answer 2

您可以使用隔离范围为列表添加指令，为每个项添加另一个指令。

这是plunker

您将通过将其转换为指令模板来获取商品的所有内容

transclude: true,
//
<div ng-transclude></div>

您可以从属性中添加每个项目的隔离范围，就像您只需要一种方法来索引每个范围，如scope="scope1" | scope="scope2"

<list-item name="First Item" scope="scope1" func="func1(scope)">

在您的指令中，您使用的操作符包括 - @ 字符串， = 模型，＆amp; 功能

// Directive
scope: {
  'name': '@',
  'iscope': '=scope',
  'func': '&'
}

然后在容器控制器中，您可以创建一种索引的项目范围数组，就像使用ng-repeat一样。

$scope.addItem = function(scope) {
   $scope.items.push(scope);
};

AngularJS ng-bind到特定的数组元素

2 个答案: