AngularJS ng綁定到特定的數組元素

我的頁面中有元素正在被ASP.Net MVC渲染時重複。（我需要這樣做的SEO目的。）AngularJS ng綁定到特定的數組元素

在這些元素中，我想有一個文本字段由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>

來源

2014-10-31 Jonas Arcangel

sometext是一個字符串。 sometextArray1和sometextArray2是字符串數組。我剛剛添加了第一個來驗證AngularJS和雙向綁定的作品。 – 2014-10-31 23:04:59

這聽起來像是一個指令的案例，您可以跨越每個項目的內容，並且您可以爲每個項目提供一個範圍。然後，您將在鏈接函數中將每個鏈接聚合到父指令中。 – Dylan 2014-10-31 23:37:10

如果你試圖讓角隱式實例化數組你，我不認爲數組分配。如果你正在使用控制器來實例化你的數組，這應該起作用。我創造了一個小提琴。

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]); 
     } 
    }]); 
})();

來源

2014-10-31 23:01:12

據我所知，索引器是可賦值的（但我還沒有測試過）。 – soktinpk 2014-10-31 23:02:30

我沒有迭代使用Angular。我重複了從服務器呈現的元素，這些元素將會像輸入字段的行一樣：sometextArray [1] ... sometextArray [2]等等。你是否建議我在這種情況下創建一個控制器的重複實例？我可以在Angular中實例化一組控制器嗎？ – 2014-10-31 23:10:19

謝謝。這工作。我需要做的就是正確初始化陣列。我最初將它設置爲一個字符串數組。有效的是將其設置爲具有字符串屬性的對象數組。 – 2014-11-04 23:12:52

您可以將指令添加到您的列表，另一個使用隔離範圍內的每個項目。

這裏有一個plunker

你會transcluding他們進入一個指令模板

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

您可以添加到每個項目的分離範圍得到你的項目的所有內容像你這樣的屬性只需要一種方法來索引每個範圍，如scope="scope1" | scope="scope2"

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

在你的指導你使用像運營商 - @字符串，=型號，&功能

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

然後在容器控制器，你可以創建一個排序的索引項目範圍數組就像使用ng-repeat一樣。

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

來源

2014-11-02 05:21:56 Dylan

謝謝。我還沒有嘗試過這個解決方案，但我會在某個時候看看它。我選擇了其他答案，因爲我可以在不需要對現有代碼進行重大更改的情況下工作。 – 2014-11-04 23:13:43

AngularJS ng綁定到特定的數組元素

回答

相關問題