動態變量角ng-repeat

我希望能夠在關注img元素時顯示一些疊加層。問題是元素是從一個angularjs的屬性填充的我只想要一個特定的img來啓用特定的文本。動態變量角ng-repeat

下面的例子does not work，ng-class變量雖然可以正確解析。

<div class="myClass" ng-repeat="i in items"> 
<span class="class-img-wrapper"> 
    <img ng-src="{{i.img}}" class="class-img-view" ng-init="{{i.name}}_focused = false" ng-focus="{{i.name}}_focused = true" ng-blur="{{i.name}}_focused = false"/> 
    <span ng-class="{classOverlayShow: {{i.name}}_focused}" class="class-img-overlay"> 
    {{i.name}} 
    </span> 
</span> 
</div>

來源

2013-11-20 Alex Edwards

'不起作用'確實不是很豐富。我們看不到數據或控制器，或者知道什麼是或不正在發生......顯示更多代碼並創建一個複製問題的演示 – charlietfl

'不工作'現在有一個小提琴:) –

解釋你期望'ng-class'可以根據名字來完成？沒有解釋沒有意義。不知道'_focused'是什麼。 'ng-class'右側需要解析爲true/false – charlietfl

這並不像有效語法對我說：

<span ng-class="{classOverlayShow: {{i.name}}_focused}" class="class-img-overlay">

它應沿着線的東西：

<span ng-class="{classOverlayShow: i.name + '_focused' }" class="class-img-overlay">

爲什麼不把focussed場您的模型在items？

代替ng-init="{{i.name}}_focused = false"，然後使用ng-focus="{{i.name}}_focused = true" ng-blur="{{i.name}}_focused = false"來動態創建動態變量（我懷疑不行，因爲它不是有效的角度語法），而是執行此操作：

控制器

$scope.items.forEach(function (i) { 
    i.focussed = false; 
}); 

$scope.setOverlay = function (item) { 
    item.focussed = true; 
}; 

$scope.removeOverlay = function (item) { 
    item.focussed = false; 
};

模板

<div class="myClass" ng-repeat="i in items"> 
<span class="class-img-wrapper"> 
    <img ng-src="{{i.img}}" class="class-img-view" ng-focus="setOverlay(i)" ng-blur="removeOverlay(i)"/> 
    <span ng-class="{classOverlayShow: i.focussed }" class="class-img-overlay"> 
    {{i.name}} 
    </span> 
</span> 
</div>

但是，angular documentation建議ngFocus指令僅適用於input，textarea,select,window和a標籤。因此，對於焦點事件，您可能需要自行創建自己的指令並綁定到onfocus事件，或切換到更簡單，更普遍的ng-click。

來源

2013-11-20 21:31:58

都沒有，謝謝我更新了這個部分，雖然它是無效的，但它確實有效！ –

我提出了一個更有角度的解決方案。 –

@AlexEdwards您是否注意到答案的更新？ –

動態變量角ng-repeat

回答

相關問題