Question

目前学习angularjs，我对如何完成任务感到困惑，因为我不完全理解ngModel正在做什么。

如果我有一个带有两个范围变量的指令：

// An array of all my objects 
$scope.allMyObjects

// The currently selected object from the array
$scope.selectedObject

并在html中

<span>{{ selectedObject.name }}</span>

<select id="select"
  ng-model="selectedObject"
  ng-options="object in allMyObjects">
</select>

这一切都很完美，当我从select中选择一个对象时，它会更新作用域上的selectedObject，从而显示当前所选对象的名称。

但是，我不想要一个选择框，而是我想要一个带有可编辑名称字段的所有对象的列表，并带有一个可以用来选择指定对象的选择按钮，所以我想出了以下内容：

<div ng-repeat="object in allMyObjects">
  <input class="object-name"
    ng-model="object.name">
    <a ng-click="loadObject(object)">Load</a>
</div>

和范围内的loadObject()函数：

function loadObject(object) {
  $scope.selectedObject = object;
}

然而，这不起作用。我原以为这基本上就是ngModel在幕后做的事情，但显然很困惑。是否有人能够为我希望实现的目标提供一些亮点或提供更好的解决方案？

Answer 1

请参见此处：http://jsbin.com/jocane/1/edit?html,js,output

使用ng-model =“object.name”代替“sc.name”

<div ng-repeat="object in allMyObjects">
  <input class="object-name"
    ng-model="object.name">
    <a ng-click="loadObject(object)">Load</a>
</div>

Answer 2

经过一个小时的调试后，问题归结为范围被ng-repeat隔离，问题没有出现在任何简化的jsfiddle示例中，因为它们使用的是纯JS，它是我正在通过导致问题的打字稿访问范围。

感谢您的答案帮助我缩小理解打字稿的难度，而不是理解指令的难度。

ngModel使用直接修改范围的魔力不是吗？

2 个答案: