Question

我有一个项目列表，当我单击时使用项目名称填充输入。数据是嵌套的。

PLUNKER： https://plnkr.co/edit/9PSkYAihxa6KRbJJcAxY?p=preview

我不能为我的生活弄清楚当我更改输入值以使列表中的值也更新时。

我花了一段时间来研究如何分享数据，这最后一步是让我脱掉头发的那一步。

总结一下：我希望当输入用项目名称填充时，我可以使用输入更改项目名称。

HTML：

<body ng-app="myApp">

  <div ng-controller="DashboardController">

    <p>Click on a part. I would like edit the part name.</p>
    <input ng-model="partname" />
    <button ng-click="changeName();">Change selected name</button>

    <div ng-repeat="vehicle in toorder">
      <h3>Parts required for: {{vehicle.make}} {{vehicle.model}}</h3>
      <ul ng-controller="ToOrderItemControler" ng-repeat="part in vehicle.parts">
        <li ng-click="partClick(part);">{{part.part_name}} ({{part.component}}) - click me</li>
      </ul>
    </div>

  </div>

</body>

JAVASCRIPT：

var app = angular.module('myApp', ['ui.bootstrap'])

.factory('mySharedService', function($rootScope) {

    var sharedService = {};

    sharedService.partname = '';

    sharedService.prepForBroadcast = function(val) {

        this.partname = val;
        this.broadcastItem();

    };

    sharedService.broadcastItem = function() {
        $rootScope.$broadcast('handleBroadcast');
    };

    return sharedService;


})

.controller('ToOrderItemControler', function($scope, mySharedService) {

    $scope.partClick = function(part) {
        mySharedService.prepForBroadcast(part.part_name);

    };

})

.controller('DashboardController', function($scope, $http, mySharedService) {

  $scope.changeName = function() {

  }

  $scope.toorder = [];

  $scope.$on('handleBroadcast', function() {
      $scope.partname = mySharedService.partname;
  });      

  $scope.loadData = function () {
      var httpRequest = $http({
          method: 'GET',
          url: 'data.json',
      }).success(function (data, status) {
          $scope.toorder = data;

      });

  };  

  $scope.loadData();

});

任何帮助表示赞赏！

Answer 1

我需要传递整个对象，而不仅仅是单个值。

HTML：

<body ng-app="myApp">
  <div ng-controller="DashboardController">


    <p>Click on a part. I would like edit the part name.</p>
    <input ng-model="part.part_name" />
    <button ng-click="changeName();">Change selected name</button>

    <div ng-repeat="vehicle in toorder">
      <h3>Parts required for: {{vehicle.make}} {{vehicle.model}}</h3>
      <ul ng-controller="ToOrderItemControler" ng-repeat="part in vehicle.parts">
        <li ng-click="partClick(part);">{{part.part_name}} ({{part.component}}) - click me</li>
      </ul>
    </div>



  </div>
</body>

JAVASCRIPT：

var app = angular.module('myApp', ['ui.bootstrap'])

.factory('mySharedService', function($rootScope) {

    var sharedService = {};

    sharedService.part = {};

    sharedService.prepForBroadcast = function(part) {

        this.part = part;
        this.broadcastItem();

    };

    sharedService.broadcastItem = function() {
        $rootScope.$broadcast('handleBroadcast');
    };

    return sharedService;


})

.controller('ToOrderItemControler', function($scope, mySharedService) {

    $scope.partClick = function(part) {
        mySharedService.prepForBroadcast(part);

    };

})

.controller('DashboardController', function($scope, $http, mySharedService) {

  $scope.changeName = function() {

  }

  $scope.toorder = [];

  $scope.$on('handleBroadcast', function() {
      $scope.part = mySharedService.part;
  });      

  $scope.loadData = function () {
      var httpRequest = $http({
          method: 'GET',
          url: 'data.json',
      }).success(function (data, status) {
          $scope.toorder = data;

      });

  };  

  $scope.loadData();

});

在Angular中更改嵌套范围的值（有plunker）

1 个答案: