Question

我正在尝试通过将ng-model指向它来设置html选择中的ng-options设置中所选项目的属性，本质上，我想要定义一个类似

的数组

data = [{option：“meow”，answer：“”}，{option：“woof”，answer：“”}]

并且有两个选项显示选项'meow'和'woof'。如果第一个选择设置为'woof'，则数据应该看起来像

[{option：“meow”，answer：“woof”}，{option：“woof”，answer：“”}]

你要展示的想法

一只猫去[喵喵]一条狗去[喵/哇]。

我试过

<select type="name" ng-model="item.answer" ng-options="item.answer as item.option for item in data" required></select>

但没有骰子......项目（或者可能是价值/参考）问题似乎存在范围问题，但我不确定：/

我创建了一个Plunker http://plnkr.co/edit/qPpW3x0SAHxTiX7SzPEM来演示。

完全重复

var app = angular.module('myApp', []);

app.directive('gap', function () {
  return {
      transclude: true,      
      template: '<select type="name" ng-model="item.answer" ng-options="item.answer as item.option for item in data" required></select>',
        link: function ($scope, $element, $attr) {
            // some code
        }
    }
});

app.directive('ngHtmlCompile', function($compile)
{
    return {
        restrict: 'A',      
        link: function(scope, element, attrs)
        {
            scope.$watch(attrs.ngHtmlCompile, function(newValue, oldValue)
            {
                element.html(newValue);

                $compile(element.contents())(scope);
            });
        }
    }
});

app.controller('TestController', function($scope) 
{
  $scope.html = "A cat goes <gap></gap> a dog goes <gap/>";
  $scope.data = [{option : "meow", answer : ""}, {option : "woof", answer : ""}]
});

    //var UsersService = $resource('/auth/users', {});

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.3.11" data-semver="1.3.11" src="https://code.angularjs.org/1.3.11/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<div ng-app="myApp" ng-controller="TestController">
  <div ng-html-compile="html"></div>
  <br>
  <br>
  Current output<br>
  {{data}}<br>
  Desired output<br>
  [{"option":"meow","answer":"meow"},{"option":"woof","answer":"woof"}]<br>
</div>

</html>

非常感谢任何帮助。

干杯，马特

Answer 1

所以...需要原型继承范围（范围：true）

使用索引标记每个元素（因此我们知道我们正在讨论哪个元素），然后在选项实例的继承范围内复制，因此我们可以将它与ng-model一起使用。

var app = angular.module('myApp', []);

var gapIndex = 0;

app.directive('gap', function () {
  return {
      transclude: true,   
      scope : true,
      template: '<select type="name" ng-model="item.answer" ng-options="item.option as item.option for item in data" required></select>',
        link: function ($scope, $element, $attr) {
            $element.tag = gapIndex++;
            $scope.item = $scope.data[$element.tag];
        }
    }
});


app.directive('ngHtmlCompile', function($compile)
{
    return {
        restrict: 'A',      
        link: function(scope, element, attrs)
        {
            scope.$watch(attrs.ngHtmlCompile, function(newValue, oldValue)
            {
                element.html(newValue);

                $compile(element.contents())(scope);
            });
        }
    }
});

app.controller('TestController', function($scope) 
{
  $scope.html = "A cat goes <gap></gap> a dog goes <gap/>";
  $scope.data = [{option : "meow", answer : ""}, {option : "woof", answer : ""}]
});

如何使用ng-model设置所选ng-options项的属性

1 个答案: