Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/377.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript AngularJS在使用值作为值语法时选择不绑定_Javascript_Angularjs_Data Binding - Fatal编程技术网

Javascript AngularJS在使用值作为值语法时选择不绑定

Javascript AngularJS在使用值作为值语法时选择不绑定,javascript,angularjs,data-binding,Javascript,Angularjs,Data Binding,我正在尝试使用AngularJS创建一个Select标记。我正在使用ngOptions和ngModel进行数据绑定 现在:假设我有如下数据源: $scope.doesNotBind=[ {ID:12,标题:“12-不绑定”}, {ID:14,标题:“14-不具有约束力”}, ]; $scope.doesNotBindModel={ID:14,标题:“14-不绑定”} 它没有绑定,因为两者是两个不同的对象 创建对象时,会为其分配单独的内存位置 var a = {}; var b = {};

我正在尝试使用AngularJS创建一个Select标记。我正在使用ngOptions和ngModel进行数据绑定

现在:假设我有如下数据源:

$scope.doesNotBind=[
{ID:12,标题:“12-不绑定”},
{ID:14,标题:“14-不具有约束力”},
];
$scope.doesNotBindModel={ID:14,标题:“14-不绑定”}

它没有绑定,因为两者是两个不同的对象

创建对象时,会为其分配单独的内存位置

var a = {};

var b = {};
如果您检查
a===b
,它将返回false。因为两者都是两个不同的对象

这就是原因

$scope.doesNotBindModel = {ID: 57, Title: "57 - Does not bind"};
不绑定

$scope.doesBindModel = $scope.doesBind[3];

因为在后面的例子中,您是根据同一对象的索引引用该对象。

ngModel
通过引用而不是值进行比较。因此,如果您在doesNotBind中使用
ng options=“value as value.Title for value”
,则您的
doesNotBind模型必须是:

JavaScript:

$scope.doesNotBindModel = $scope.doesNotBind[1];
$scope.values = [{
  id: 1,
  label: 'aLabel',
  subItem: { name: 'aSubItem' }
}, {
  id: 2,
  label: 'bLabel',
  subItem: { name: 'bSubItem' }
}];

$scope.selected = { name: 'aSubItem' };
但是,如果您仍然希望在JSON表示法中设置
doesNotBindModel
,则可以向
ng options
表达式添加
track by value.ID
,如下所示:

HTML:

JavaScript:

$scope.doesNotBindModel = $scope.doesNotBind[1];
$scope.values = [{
  id: 1,
  label: 'aLabel',
  subItem: { name: 'aSubItem' }
}, {
  id: 2,
  label: 'bLabel',
  subItem: { name: 'bSubItem' }
}];

$scope.selected = { name: 'aSubItem' };
出于保留选择的目的,
track by
表达式始终应用于数据源的元素(本例中为
)。要计算是否选择了某个元素,请执行以下操作:

  • 对数组中的元素应用
    track by
    。在示例中:
    [1,2]
  • track by
    应用于
    ngModel
    中已选择的值
  • 在示例中:这是不可能的,因为
    track by
    指的是
    item.id
    ,但是从
    ngModel
    中选择的值是
    {name:'aSubItem'}
    。因此,
    track by
    表达式应用于错误的对象,无法找到所选元素<代码>
    始终重置为“未选择”选项


    活生生的例子:

    根据你最近的编辑更新了答案是的是的,我完全意识到这个问题就是你上面写的问题。我在寻找解决这个问题的方法。可能解决方法是在绑定时获取对对象的引用。我想这是唯一的逻辑解决方案。解决方法是什么?如果要在选择框中预选特定选项,可以使用ng init或必须使用数组索引方式来设置特定项。可以使用ng init并调用函数。在那里,您可以检查特定条件,并将特定项目设置为在ng modelFair中选择的项目。对于我的问题,我可以在通过获取数据后设置它。干杯,嗨。谢谢你的回答。我正在阅读文档,偶然发现了trackby表达式。为什么不推荐呢?他们说不要将它与select as结合起来,仅此而已。我已经经历了这一切。示例:@AlbertHerd我已经更新了我的答案,以说明为什么angular的doc说“不要在同一表达式中使用select as和track by”。他们不是为了一起工作而设计的。谢谢你的评论。我进一步以我的例子创建了一个POC。我将ng模型设置为数据源中确实存在的值,但不引用它。通过删除“选择为”表达式并添加“轨迹依据”,它将成功运行。事实上,doc说不要将select as与track by组合,因为它们已经消除了。例子: