代码之家  ›  专栏  ›  技术社区  ›  Valor_ user3379466

ng重复中的动态ng模型未定义

  •  2
  • Valor_ user3379466  · 技术社区  · 8 年前

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

    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不能未定义的错误,我猜我做错了什么。我希望你们能帮助我。如果你需要任何额外的信息,请让我知道,我会提供。提前谢谢你

    2 回复  |  直到 8 年前
        1
  •  3
  •   Valor_ user3379466    8 年前

    你有过 ng-repeat 具有 i in slideShowImages 也就是说,在每次迭代中 i 将仅在UI上具有集合的当前元素(不在控制器范围内)。所以你不能 $scope.i 控制器内的值。您必须从 updateImage 作为参数,如 ng-click="updateImage(i)" 对象,该对象在UI上可用。

    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);
    };
    
        2
  •  1
  •   Shashank    8 年前

    i 的对象 ng-repeat 在控制器中。 还可以使用json中的任何其他键进行过滤。

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

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

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