Question

我是AngularJS的新手，现在面临一个问题。当我浏览解决方案并从任何类别中选择一个项目时，它将使用结果而不是预期的部分来更新所有部分的文本框。

如果我只有一个部分，那么一切都很好，但是当我有一个以上部分时，那么一切都折腾了。我知道这是因为$ scope变量currentItem。我不确定如何解决此问题。

为解决该问题而提出的任何建议都受到高度赞赏。预先谢谢你。

HTML页面[default.htm]

<html ng-app="myapp" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
</head>
<body>
    <div ng-view>
    </div>

    <script src="myapp.js" type="text/javascript"></script>
</body>
</html>

JavaScript [myapp.js]

var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider) {
  $routeProvider
  .when('/home', {
    templateUrl : 'partials/Home.htm',
    controller  : 'HomeController'
  })
  .otherwise({redirectTo: '/home'});
});

app.controller('HomeController', function($scope,$sce, $http, $location, $rootScope) {


    $scope.datas = [
                        {
                            "category":"First Category",
                            "items":[
                                {
                                    "itemCode":"001",
                                    "itemDescription":"Item 01"
                                },
                                {
                                    "itemCode":"002",
                                    "itemDescription":"Item 02"
                                }
                            ]
                        },
                        {
                            "category":"Second Category",
                            "items":[
                                {
                                    "itemCode":"004",
                                    "itemDescription":"Item 04"
                                },
                                {
                                    "itemCode":"005",
                                    "itemDescription":"Item 05"
                                }
                            ]
                        }
                    ];



    $scope.selectItem = function(parentindex, index){
        $scope.currentItem = $scope.datas[parentindex].items[index];
    }
});

部分页面[partials/Home.htm]

<div ng-repeat='data in datas'>
    <table>
        <tr>
            <td>
                {{data.category}} Items
            </td>
        </tr>
        <tr ng-repeat='item in data.items' ng-click='selectItem($parent.$index, $index)'>
            <td>
                {{item.itemDescription}}
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td>
                Code:
            </td>
            <td>
                <input ng-model='currentItem.itemCode' type="text" />
            </td>
        </tr>
        <tr>
            <td>
                Description:
            </td>
            <td>
                <input ng-model='currentItem.itemDescription' type="text" />
            </td>
        </tr>
    </table>
</div>

AngularJS多级表单

0 个答案: