使用 ng-model-options 预选选项

Question

这是我的scope.projectArr 数组

scope.projectArr = [  
   {  
      "proName":"fffff",
      "proId":"12"
   },
   {  
      "proName":"project 0001",
      "proId":"13"
   },
   {  
      "proName":"ABC website",
      "proId":"7"
   }
];

我有另一个对象，它有一个名为project 的属性并包含一个字符串值

$scope.timesheet = {};
$scope.timesheet.project = "ABC website";

我的问题是我希望所有数组元素都作为选项，并根据$scope.timesheet.project 值预先选择一个选项。我使用ng-model-options="{trackBy: $value.proName}" 尝试过，但无法这样做

这里是html

<md-select placeholder="Project" ng-model="timesheet.project" 
   flex  ng-model-options="{trackBy: $value.proName}">
   <md-optgroup label="Project">
   <md-option  ng-repeat="item in projectArr"  ng-value="item">{{item.proName}}    </md-option>
</md-select>

我尝试在 ng-value 内使用大括号，但结果相同。

我查找检查元素以检查值是否分配给选项，但它显示为[object object]

`

请注意，我使用的是角度材料，据我所知，ng-option 在材料中不可用。

不要被图片中的vm.projectArr 弄糊涂了。我在我的应用程序中使用了 controllerAs，但为了简单起见，我将此问题发布为范围变量。

Answer 1

更新

您可以使用 ng-model-options，如下所示：
您错过了 trackBy 表达式周围的引号

<md-select placeholder="Project" ng-model="timesheet.project" flex ng-model-options="{trackBy: '$value.proName'}">
  <md-optgroup label="Project">
    <md-option ng-repeat="item in projectArr" ng-value="item">{{item.proName}} </md-option>
</md-select>

在您的控制器中使用以下：

$scope.timesheet = {
    'project': {
        'proName': "ABC website"
    }
};

Updated Plunker

---

我能够使用它来工作

$scope.timesheet = {
    'project': arrFilter($scope.projectArr, 'proName', 'ABC website')[0]
};

arrFilter 方法：该方法接受array、property name、property value 并从对象数组中返回数组。

function arrFilter(arr, prop, val) {
    return arr.filter(function(v) {
        debugger;
        return v[prop].indexOf(val) > -1
    }) || [];
}

工作演示

Plunker

解释：

由于您选择获取对象，因此您应该提供 arrFilter 正在执行的 same object reference。
这样做的原因是，在 javascript 中，对象比较是通过引用而不是值来完成的。 示例：

{} never equals to {}

但是 a={}、b=a 和 a equals b

Answer 2

试试这个， ng-value ="item.proId"

<md-select placeholder="Project" ng-model="timesheet.project" 
   flex  ng-model-options="{trackBy: $value.proName}">
   <md-optgroup label="Project">
   <md-option  ng-repeat="item in projectArr"  ng-value="item.proId">{{item.proName}}    </md-option>
</md-select>

Answer 3

将控制器中的模型初始化为

$scope.timesheet.project = $scope.projectArr[2]

或者在你看来

<div ng-init="timesheet.project = projectArr[2]">
    <md-select placeholder="Project" ng-model="timesheet.project" flex>
       <md-optgroup label="Project">
       <md-option  ng-repeat="item in projectArr">{{item.proName}}</md-option>
    </md-select>
</div>

这会将其初始化为第三个对象并显示“ABC网站”

Answer 4

应该是这样的

$scope.timesheet = {};
$scope.timesheet.project = $scope.projectArr[0];

编辑：

 <md-select placeholder="Project" ng-model="timesheet.project" >
   <md-option  ng-repeat="item in projectArr"  
    ng-value="item.proName">     {{item.proName}} </md-option>
 </md-select>

然后像这样初始化

 $scope.timesheet.project = $scope.theStringValue; //ABC website

或类似的

  <md-select placeholder="Project" ng-model="timesheet.project" >
   <md-option  ng-repeat="item in projectArr"  
    ng-value="item.proId">     {{item.proName}} </md-option>
 </md-select>

对于默认选择值

   angular.forEach($scope.projectArr,function(proj){
      if(proj.proName == $scope.theStringValue)
        $scope.timesheet.project = proj.proId;
   })