ng-repeat 中的动态 ng-model 未定义

Question

我需要有关 ng-repeat 中动态生成模型的帮助。我有一个 HTML 有 ng-repeating table 行。每行都有一个选项，可以使用更新按钮更新图像名称和价格。

HTML

<tr role="row" class="odd" ng-repeat="i in slideShowImages track by $index">
    <td>
        <img ng-src="{{i.thumb_path}}" width="100px" height="auto" >
    </td>
    <td>
        <div class="form-group">
            <input type="text" name="imageName" ng-model="i.imageName[$index]"
                   class="form-control" id="imageName" required>
        </div>
    </td>
    <td>{{i.date_taken | myDate}}</td>
    <td>
        <div class="form-group">
            <input type="text" name="imagePrice" ng-model="i.imagePrice[$index]"
                   class="form-control" id="imagePrice" required>
        </div>
    </td>
    <td>
        {{i.position}}
    </td>
    <td>
        <a ng-click="updateImage(i.id_thumb, $index)">
            <button class="btn btn-block btn-success">Update</button>
        </a>
    </td>
    <td>
        <a ng-click="deleteImage(i.id_thumb, $index)">
            <button class="btn btn-block btn-danger">Delete</button>
        </a>
    </td>
</tr>

这是我的控制器函数，它试图获取值

$scope.updateImage = function(id, $index){
    $scope.models = {};
    console.log(id);
    console.log($index);
    console.log($scope.i.imageName[$index]);
    console.log($scope.i.imagePrice[$index]);
};
// result of console logs
4
0
angular.js:13550 TypeError: Cannot read property 'imageName' of undefined
    at Scope.$scope.updateImage (locationsCtrl.js:243)
    at fn (eval at compile (angular.js:14432), <anonymous>:4:486)
    at expensiveCheckFn (angular.js:15485)
    at callback (angular.js:25018)
    at Scope.$eval (angular.js:17229)
    at Scope.$apply (angular.js:17329)
    at HTMLAnchorElement.<anonymous> (angular.js:25023)
    at HTMLAnchorElement.dispatch (jQuery-2.1.4.min.js:3)
    at HTMLAnchorElement.r.handle (jQuery-2.1.4.min.js:3)

我猜我做错了什么，因为 imageName 和 imagePrice 不能未定义。我希望你们能帮助我。如果您需要任何其他信息，请告诉我，我会提供。提前谢谢你

Answer 1

你有 ng-repeat 和 i in slideShowImages 这表示，在每次迭代中 i 将仅在 UI 上拥有当前集合元素（不在控制器范围内） .所以你无法在控制器中获取 $scope.i 值。您必须将 updateImage 中的值作为参数传递给 ng-click="updateImage(i)"。然后你可以玩 UI.

上可用的 i 对象

HTML

<td>
    <a ng-click="updateImage(i)">
        <button class="btn btn-block btn-success">Update</button>
    </a>
</td>
<td>
    <a ng-click="deleteImage(i, $index)">
        <button class="btn btn-block btn-danger">Delete</button>
    </a>
</td>

控制器

$scope.updateImage = function(i){
    console.log(i.imageName);
    console.log(i.imagePrice);
};

Answer 2

您无法在控制器中获取 ng-repeat 的 i 对象。还可以做的是使用 json.

中的任何其他键进行过滤

示例：

$scope.currentImageName = $filter('filter')(slideShowImages,{ id: $index});

这里假设 slideShowImages 有一个值为 id 的字段 - $index.

此外，在控制器定义中添加依赖注入$filter。

ng-repeat 中的动态 ng-model 未定义

Dynamical ng-model in ng-repeat is undefined

javascript

angularjs

ng-repeat

angularjs-ng-repeat