如何聲明一個類似於ng-repeat的變量，但對於單個對象？

我使用ng-repeat來重新使用部分html類，如下所示。由於Angular的魔力，這個效果很好。如何聲明一個類似於ng-repeat的變量，但對於單個對象？

家長HTML：局部的Html 「_ItemViewer」

<div ng-repeat="item in vm.items"> 
    @Html.Partial("_ItemViewer") 
</div>

相關部分：

<textarea class="form-control" rows="3" name="description" 
    ng-model="item.description"></textarea>

可以參考我的「項目」的部分，它會正確地綁定。這正是我想要的行爲，但在單個對象上，不使用ng-repeat。

我的控制器「vm」有兩個獨立的屬性「A」和「B」。它們是同一種物體。他們可能並不總是，但他們目前是。這就是他們共享相同的部分Html表單的原因。

例如：

<fieldset> 
    <legend>ItemA</legend> 
    @Html.Partial("_SingleItem") 
</fieldset> 

<fieldset> 
    <legend>ItemB</legend> 
    @Html.Partial("_SingleItem") 
</fieldset>

我希望能夠把它們稱爲一個變量，在NG-重複做。相反，我不得不在部分「_SingleItem」指定的模式，就像這樣：

<input class="form-control" type="text" name="name" 
    ng-model="vm.itemA.name">

這破壞了再利用的部分的。我需要的是能夠做到如下所示：

<input class="form-control" type="text" name="name" 
    ng-model="item.name">

我該如何做到這一點？

來源

2015-04-02 K_Ram

您可以創建[自定義指令（https://docs.angularjs.org/guide/directive）來處理這個問題。 – 2015-04-02 16:36:21

你可以簡單地創建自定義的指令，它會別名在指定的名稱所需的值，就像這樣：

app.directive('myValue', function() { 
    return { 
     scope: true, 
     link: function (scope, element, attrs) { 
      //attach the value to the scope under an alias 
      //just like ng-repeat does 
      scope[attrs.newName] = scope.$eval(attrs.myValue); 
     } 
    }; 
});

然後在模板只是包裝的部分在這個指令：

<div my-value="vm.itemA" new-name="item"> 
    <input class="form-control" type="text" name="name" 
     ng-model="item.name"> 
</div>

來源

2015-04-02 16:47:39 getOffMyLawn

正是我想要的。只是給它一個運行，它似乎是完美的工作。謝謝！ – 2015-04-02 17:52:14

如果您希望爲每個沒有指令的字段集組創建一個孤立的別名，可以使用ng-repeat並過濾到您的集合中所需的精確項目。

<fieldset> 
    <legend>ItemA</legend> 
    <div ng-repeat="item in vm.items | filter:{id: 1}:true | limitTo:1> 
     @Html.Partial("_SingleItem") 
    </div> 
</fieldset> 

<fieldset> 
    <legend>ItemB</legend> 
    <div ng-repeat="item in vm.items | filter:{id: 2}:true | limitTo:1> 
     @Html.Partial("_SingleItem") 
    </div> 
</fieldset>

來源

2015-04-02 16:41:34

如果他們在列表中，那就行了，但我確實需要他們在不同的屬性中。但是，無論如何，這對了解其他事情都很有用。謝謝。 – 2015-04-02 17:53:03

在客戶端修補它既麻煩又不必要。

你@HTML.Partial不，其實，「同分」，因爲它顯然是不同的，因爲它有不同的ng-model屬性。

因此，不要在客戶端上向後修補它，只需傳遞參數即可在服務器上生成正確的HTML。如果，當您的諧音成爲不同，你不會有更改客戶端：

@Html.Partial("_ItemViewer", new {ngModel = "vm.itemA.name"})

來源

2015-04-02 17:49:48

我會如何在部分中使用它？也就是說，在我的「_ItemViewer」html中，按照你的例子，我將如何引用傳入的ngModel？ – 2015-04-02 18:01:54

@K_Ram，這裏是一個例子：http://stackoverflow.com/a/22867195/968155 – 2015-04-02 21:21:51

如何聲明一個類似於ng-repeat的變量，但對於單個對象？

回答

相關問題