Javascript 使用AngularJS和ng重复初始化select_Javascript_Angularjs

Javascript 使用AngularJS和ng重复初始化select

javascript angularjs

Javascript 使用AngularJS和ng重复初始化select,javascript,angularjs,Javascript,Angularjs,我正在尝试使用AngularJS 1.1.5中的ng repeat使选择框以预填充选项开始。取而代之的是，选择总是以未选择任何内容开始。它还有一个空选项，我不想要。我认为没有被选中会产生副作用我可以使用ng选项而不是ng repeat来实现这一点，但我想在这种情况下使用ng repeat。虽然我缩小的示例没有显示，但我还想设置每个选项的title属性，据我所知，使用ng选项无法实现这一点我认为这与常见的AngularJs作用域/原型继承问题无关。至少我在巴塔朗视察时没有看到任何明显的迹象。另

我正在尝试使用AngularJS 1.1.5中的ng repeat使选择框以预填充选项开始。取而代之的是，选择总是以未选择任何内容开始。它还有一个空选项，我不想要。我认为没有被选中会产生副作用

我可以使用ng选项而不是ng repeat来实现这一点，但我想在这种情况下使用ng repeat。虽然我缩小的示例没有显示，但我还想设置每个选项的title属性，据我所知，使用ng选项无法实现这一点

我认为这与常见的AngularJs作用域/原型继承问题无关。至少我在巴塔朗视察时没有看到任何明显的迹象。另外，当您在“使用UI选择”对话框中选择一个选项时，模型确实会正确更新

以下是HTML：

<body ng-app ng-controller="AppCtrl">
    <div>
        Operator is: {{filterCondition.operator}}
    </div>
    <select ng-model="filterCondition.operator">
       <option 
           ng-repeat="operator in operators" 
           value="{{operator.value}}"
       >
           {{operator.displayName}}
       </option>
    </select>
</body>

JS Fiddle：正如建议的那样，您需要使用ng选项，不幸的是，我认为您需要引用数组元素作为默认值（除非数组是字符串数组）

JavaScript：

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]
}

function AppCtrl($scope) {


    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]

    $scope.filterCondition={
        operator: $scope.operators[0]
    }
}

HTML：

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator.value}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators">
</select>
</body>


运算符为：{{filterCondition.Operator.value}

对于select标记，angular提供ng options指令。它为您提供了设置选项和默认值的特定框架。以下是使用ng选项更新的小提琴，效果与预期一致：

更新的HTML（代码保持不变）


运算符为：{{filterCondition.Operator}}

感谢您指出ng所选选项。如果那是作为一个答案而不是评论发布的，我会做出正确的回答

这里有一个正在工作的JSFIDLE:

我还更新了fiddle以使用title属性，这是我在原始帖子中遗漏的，因为这不是问题的原因（但这也是我希望使用ng repeat而不是ng options的原因）

HTML:

嗯。如果您不想使用正确的方式

ng options

，可以为

option

指令添加带有条件检查逻辑的

ng selected

属性，以使预选工作

<select ng-model="filterCondition.operator">
    <option ng-selected="{{operator.value == filterCondition.operator}}"
            ng-repeat="operator in operators"
            value="{{operator.value}}">
      {{operator.displayName}}
    </option>
</select>


{{operator.displayName}

angular向select注入空选项元素的事实是，默认情况下绑定到它的模型对象在初始化时在中带有空值

如果您想选择一个默认选项，那么您可能可以在控制器的作用域上设置它

$scope.filterCondition.operator = "your value here";

如果你想要一个空的选项占位符，这对我来说很有用

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
  <option value="">Choose Operator</option>
</select>


选择运算符

如果您使用的是md select和ng repeat ing md选项，则可以将

ng model options=“{trackBy:'$value.id'}”

添加到md select标记中，如中所示

代码：


{{user？user.name:'分配给用户'}}
{{user.name}

ngOption之所以被创建，是因为使用ngRepeat没有干净的方法。选择该选项后，重复展开。您是否尝试在选项上设置ngSelect是！这部电影成功了！我将发布一个更新的工作JSFIDLE。应该注意的是，在AngualrJS 1.2中，该代码的工作方式不同——它不会创建新的空元素，但是，它只能选择列表框中的第一个选项。你可以看到，你知道为什么吗，你确定吗？文档（）说，您只需要在绑定到非字符串值时使用ng选项。就像我说的，我想使用title属性，但是使用ng选项无法做到这一点。有点像谢谢。我相信文档中的注释有点不清楚，实际上意味着你必须为模型使用字符串，并为选项使用字符串数组。如果您不介意使用“title”属性的原因是什么，我在W3C上看不到它，也不记得真正使用过它。难道你不能将描述存储在对象中，然后仍然检索数据，因为这就是模型现在绑定到的数据吗？在你链接到的W3C页面上，如果你点击全局属性链接，你会看到option元素支持title属性。我使用title属性只是为了显示“tooltip”文本，这样，如果您将鼠标悬停在某个选项上，您就可以更详细地描述该选项的含义。这是一件小事，但如果可能的话，拥有它会很好。@CharlesO。我想和你一模一样。设置一个对象（非字符串值），但我还想在选项列表中使用标题。有没有解决办法。我似乎找不到它…嗨，杰里米--我正在尝试在没有ng选项的情况下做这件事。正如我在回答Shaun的问题时所说的，我想在每个选项上设置title属性，但据我所知，我不能在ng选项上设置title属性。谢谢，Charles很抱歉作为评论发布。我不想做一个例子，我也不是100%肯定它会起作用。这只是一种预感。我相信你，因为你自己发现了这一点，并且做了完整的例子。虽然我不同意你关于ng选项是“正确的方式”的评论：）我自己也一直使用ng选项，但这需要做一些ng选项不支持的事情，尽管它很小。有角度的医生说你也可以重复。谢谢，CharlesThanks，这是一种禁用某些选项的简单方法。ng-options只有在其使用情况适合您的情况下才是正确的。在option/optgroup字段等中可能需要额外的属性/类。“正确的方法”有时不起作用（例如，如果要翻译填充选项名称的字符串），我认为ng selected表达式必须没有{{}:ng selected=“operator.value==filterCondition.operator”这很好，但要创建一个空白选项。如何避免这种情况？

<select ng-model="filterCondition.operator">
    <option ng-selected="{{operator.value == filterCondition.operator}}"
            ng-repeat="operator in operators"
            value="{{operator.value}}">
      {{operator.displayName}}
    </option>
</select>

$scope.filterCondition.operator = "your value here";

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
  <option value="">Choose Operator</option>
</select>