如何使用动态值将ng-model设置为父作用域

时间:2018-04-06 21:51:49

标签: javascript html angularjs

我正在尝试在select标签上为ng-model动态生成一个名称,并且可以像在表2中那样在父作用域中访问它,但显然它们可以相互独立地工作。

所以我的问题是如何将ng-model设置为类似“$ parent.ot1”数据对象的数组?

 var overtimeapp = angular.module('overtime', []);

      overtimeapp.controller('ctrlOvertime', function ($scope, $http) {
        
        $scope.overtimes = [{"otid" : "ot1"}, {"otid" : "ot2"}];

        $scope.overtimetypes = ['d', 'n', 'r', 's', 'h'];
      });
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="overtime" ng-controller="ctrlOvertime">
	  table one
	  <table class="table table-bordered">
	    <tbody>
		  <tr ng-repeat="o in overtimes">
			<td>
			  <select class="w3-select" ng-model="o.otid" ng-options="x for x in  
                overtimetypes"></select>
			</td>
		  </tr>
		</tbody>
	  </table>
          table two
	  <table class="table table-bordered">
		<tbody>
		  <tr ng-repeat="o in overtimes">
		    <td>
			  <select class="w3-select" ng-model="$parent.selected" ng-options="x for x in  
                overtimetypes"></select>
			</td>
		  </tr>
	    </tbody>
	  </table>
	</div>
  </body>
</html>

1 个答案:

答案 0 :(得分:1)

$scope.selected初始化为控制器中的数组:

$scope.selected = [];

然后在$index指令中使用ng-model

  <table class="table table-bordered">
    <tbody>
      <tr ng-repeat="o in overtimes">
        <td>
          <select class="w3-select"
                  ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶$̶p̶a̶r̶e̶n̶t̶.̶s̶e̶l̶e̶c̶t̶e̶d̶"̶
                  ng-model="selected[$index]"
                  ng-options="x for x in overtimetypes">
          </select>
        </td>
      </tr>
    </tbody>
  </table>