Question

我有以下HTML代码＆lt; select name =＆＃34; Gender＆＃34;类=＆＃34;形状控制＆＃34;＆GT; ＆lt; option value =＆＃34; m＆＃34;＆gt;男＆lt; / option＆gt; ＆lt; option value =＆＃34; f＆＃34;＆gt;女＆lt; / option＆gt; ＆LT; /选择＆GT; 我想在点击AngularJs时更改选择选项。我已经尝试了几乎所有的东西，并且我意识到调用click事件时会出现问题，如果没有click事件它工作正常 HTML：＆lt; body ng-app ng-controller =＆＃34; AppCtrl＆＃34;＆gt; ＆lt; div ng-click =＆＃34; setGender（）＆＃34;＆gt;设置＆lt; / div＆gt; ＆lt; select name =＆＃34; Gender＆＃34;类=＆＃34;形状控制＆＃34;＆GT; ＆lt; option value =＆＃34; m＆＃34; ng-selected =＆＃34; {{GenderInfo.Gender ==＆＃39; m＆＃39;}}＆＃34;＆gt;男＆lt; /选项＆gt; ＆lt; option value =＆＃34; f＆＃34; ng-selected =＆＃34; {{GenderInfo.Gender ==＆＃39; f＆＃39;}}＆＃34;＆gt;女＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; /体＆GT; AngularJs： function AppCtrl（$ scope）{ $ scope.setGender = function（）{ $ scope.GenderInfo = { 性别：＆＃39; f＆＃39; } } } 的jsfiddle： http://jsfiddle.net/dCFd2/231/

Answer 1

你不需要ng-selected内的花括号：

<option value="m" ng-selected="GenderInfo.Gender =='m'">Male</option>
<option value="f" ng-selected="GenderInfo.Gender =='f'">Female</option>

Answer 2

尝试如下：

<body ng-app ng-controller="AppCtrl">
    <div ng-click="setGender()">Set</div>
   <select name="Gender" class="form-control">
        <option value="m" ng-selected="GenderInfo.Gender =='m'">Male</option>
        <option value="f" ng-selected="GenderInfo.Gender =='f'">Female</option>
   </select>
</body>

ngSelected不需要{{}}，因为它会评估给定的表达式。

希望这有帮助。我用你的jsFiddle对它进行了测试，看起来效果很好。

Answer 3

使用ng-options查看我的code：

<select ng-model="GenderInfo" name="Gender" class="form-control" ng-options="g.value as g.title for g in gender">

使用Javascript：

 $scope.gender = [
            {value:'m',title:'Male'}, 
            {value:'f',title:'Female'}
            ];
        $scope.GenderInfo = $scope.gender[0].value;//Set Default gender

Answer 4

您可以ng-options使用Example

   <select ng-init="model.Gender = genders[0].Key" name="Gender" class="form-control" ng-model="model.Gender" ng-options="g.Key as g.Gender for g in genders">

如何在单击时使用AngularJs更新<select>选项

4 个答案: