从控制器绑定ng-repeat和ng-model

Question

我是AngularJS的新手。我正在尝试使用ng-repeat构建一个表单，并且无法将我的头部缠绕在有角度的东西上。

这是我的角度控制器：

// Create the 'products' controller
angular.module('products').controller('ProductsController', ['$scope', '$routeParams',    '$location', 'Authentication', 'Products',
function($scope, $routeParams, $location, Authentication, Products) {
    // Expose the Authentication service
    $scope.authentication = Authentication;

    $scope.productProperty = {
        productTitle: {slug: 'productTitle', label: 'Product Title', value: '', placeholder: 'Product Title'},
        productCode: {slug: 'productCode', label: 'Product Code', value: '', placeholder: 'Product Code'},
        productModel: {slug: 'productModel', label: 'Product Model', value: '', placeholder: 'Product Model'},
        productColor: {slug: 'productColor', label: 'Product Color', value: '', placeholder: 'Product Color'}
    };

    // Create a new controller method for creating new products
    $scope.create = function() {
        // Use the form fields to create a new product $resource object
        var product = new Products({
            productTitle: this.productTitle,
            productCode: this.productCode,
            productModel: this.productModel,
            productColor: this.productColor
        });

        // Use the product '$save' method to send an appropriate POST request
        product.$save(function(response) {
            // If an product was created successfully, redirect the user to the product's page 
            $location.path('products/' + response._id);
        }, function(errorResponse) {
            // Otherwise, present the user with the error message
            $scope.error = errorResponse.data.message;
        });
    };
}
]);

HTML：

    <!-- The create product view -->
<section data-ng-controller="ProductsController">
    <h1>New Product</h1>
    <!-- The new product form -->
    <form data-ng-submit="create()" novalidate>
        <div class="row" data-ng-repeat="(keyAssets, valueAssets) in productProperty">
            <div>
                <label for="{{productProperty[keyAssets]['slug']}}">{{productProperty[keyAssets]['label']}}</label>
                <div>
                    <input type="text" data-ng-model="productProperty[keyAssets]['slug']" id="{{productProperty[keyAssets]['slug']}}" placeholder="{{productProperty[keyAssets]['placeholder']}}" required>
                </div>
            </div>
        </div>
        <div>
            <input type="submit">
        </div>
        <!-- The error message element -->
        <div data-ng-show="error">
            <strong data-ng-bind="error"></strong>
        </div>
    </form>
</section>

我正在尝试将'data-ng-model'设置为data-ng-repeat的每个实例中的独特内容。但我没有得到理想的输出。

我想要以下输出：

<!-- The create product view -->
<section data-ng-controller="ProductsController">
<h1>New Product</h1>
<!-- The new product form -->
<form data-ng-submit="create()" novalidate>
    <div>
        <label for="productTitle">Product Title</label>
        <div>
            <input type="text" data-ng-model="productTitle" id="productTitle" placeholder="Product Name" required>
        </div>
    </div>
    <div>
        <label for="productCode">Product Code</label>
        <div>
            <input type="text" data-ng-model="productCode" id="productCode" placeholder="Product Code" required>
        </div>
    </div>
    <div>
        <label for="productModel">Product Model</label>
        <div>
            <input type="text" data-ng-model="productModel" id="productModel" placeholder="Product Model" required>
        </div>
    </div>
    <div>
        <label for="productColor">Product Color</label>
        <div>
            <input type="text" data-ng-model="productColor" id="productColor" placeholder="Product Color" required>
        </div>
    </div>
    <div>
        <input type="submit">
    </div>
    <!-- The error message element -->
    <div data-ng-show="error">
        <strong data-ng-bind="error"></strong>
    </div>
</form>

如何在每次ng-repeat实例中将'data-ng-model'设置为唯一的？