Question

   var options = [
          {name: ['black', 'green', 'black'], shade:'dark'},
          {name: ['white', 'black', 'white'], shade:'light'},
          {name: ['grey', 'white', 'yellow'], shade:'dark'},
          {name: ['red', 'black', 'red'], shade:'dark'},
          {name: ['yellow', 'green', 'black'], shade:'light'}
          ];

    var app = angular.module('module', []);
        app.controller('MainCtrl', function($scope) {
        $scope.options = options;
        $scope.$watch('myselect', function(val) {
        console.log(val);
    });
});
    </script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat="option in options">
        <select ng-model="myselect" ng-options=" item for item in option.name"></select>
    </div>
  </body>

我是角色甚至网络开发的新人。我需要选择一个名称的数组元素并将其发送到服务器。我想这样做，但没有发生任何事情。谢谢你的帮助。

Answer 1

您的代码中存在以下几个问题：

您将所有选择绑定到同一模型myselect。
未设置myselect模型的初始值。
为了观察对象属性的更改，您应该使用true作为watch()的第三个参数

<强> HTML

<body ng-controller="MainCtrl">
    <div ng-repeat="option in options">
        <select ng-model="myselect[$index]" ng-options="item for item in option.name"></select>
    </div>
</body>

<强>的JavaScript

var options = [
  {name: ['black', 'green', 'black'], shade:'dark'},
  {name: ['white', 'black', 'white'], shade:'light'},
  {name: ['grey', 'white', 'yellow'], shade:'dark'},
  {name: ['red', 'black', 'red'], shade:'dark'},
  {name: ['yellow', 'green', 'black'], shade:'light'}
];

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

app.controller('MainCtrl', function($scope) {
  $scope.options = options;
  $scope.myselect = {}; // <= set initial value to be an empty object
  $scope.$watch('myselect', function(val) {
    console.log(val);
  }, true); // <= use true as third parameter in order to watch object property changes
});

这是一个带有工作示例的plunker。

为了向服务器发送内容，您可以使用Angular的内置$http服务。

Answer 2

我认为你错过了一些像'ng-app'这样的代码，为什么要为div添加ng-repeat？实际上，我们只为select元素添加ng-repeat。

您可以使用一些示例代码：
example

如何使用角度选择数组元素？

2 个答案: