javascript - 如何使用动态值将 ng-model 设置为父范围

标签 javascript html angularjs

我正在尝试在选择标签上动态生成 ng-model 的名称,并使其在父范围内可访问(如表二所示),但显然让它们彼此独立工作。

所以我的问题是如何将 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>

最佳答案

$scope.selected 初始化为 Controller 中的数组:

$scope.selected = [];

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

  <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>

关于javascript - 如何使用动态值将 ng-model 设置为父范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49701442/

相关文章:

javascript - 向下滑动事件未触发 - ionic 框架

javascript - 如何在 Windows 7 操作系统机器上的 asp.net 中构建 Windows 8 移动应用程序?

angularjs - Angular jsonp数据打印

javascript - 如何使用 AngularJS 制作基于单选按钮值的下拉列表?

javascript - 如何在禁用点击时保持悬停属性

javascript - ES6 groupBy,分区,排序对象列表

javascript - jQuery 菜单 : Scroll after menu close

javascript - 更改球边框颜色

javascript - ng-重复不起作用

javascript - Angularjs - 如何从服务器 json 答案设置模板内容?