angularjs - 动态创建的指令属性在 AngularJS 的 ng-repeat 中不起作用

Question

我正在上传图像并使用 ionic 框架在前端显示它，我实际上正在开发 cordova 应用程序。我想动态更改指令值，例如

<ion-content ng-controller="AppDetailCtrl">
        <ion-item collection-repeat="Doc in DocTypes">
            {{Doc.RequiredDocument}}
            <div>
                <img ng-show='imgURI_{{Doc.RequiredDocID}} !== undefined' width="100px" height="150px" ng-src="{{imgURI_1}}">
                <button class="button" ng-click="takePicture()">Upload Picture</button>
            </div>
        </ion-item>
    </ion-content>

它正确替换了渲染的 HTML 中的值，但工作不正常。如果我写硬编码值那么它工作正常。我怎样才能实现这种动态行为。

Answer 1

你应该使用这样的东西:

<ion-content ng-controller="AppDetailCtrl">
    <ion-item collection-repeat="Doc in DocTypes">
        {{Doc.RequiredDocument}}
        <div>
            <img ng-show="this['imgURI_' + Doc.RequiredDocID] !== undefined" width="100px" height="150px" ng-src="{{ 'imgURI_' + Doc.RequiredDocID }}">
            <button class="button" ng-click="takePicture()">Upload Picture</button>
        </div>
    </ion-item>
</ion-content>

this['imgURI_' + Doc.RequiredDocID] 可能看起来有点奇怪，但实际上这对于 javascript bracket notation 来说是正常的。 ，在您的情况下，是一种通过变量名称('imgURI_' + Doc.RequiredDocID)引用对象属性(this - 是范围对象)的方法。 p>