Question

我正在尝试在angularjs应用程序中创建一个html页面。我有一个输入框和一个下拉列表。我的输入框有大小，我想让下拉扩展与我的输入框大小相同。

My Html Code,
<body ng-controller="Controller">
<h1>Plunkr Example</h1>
<fieldset style="border:1px solid black;">
    <legend>Data</legend>
  <span style="float:right">Check4: <input type="input" id="input"
  ng-repeat="x in string | filter : 'check'" 
  ng-model="x._text"/>
  <select id="dropdown">
    <option value="1">True</option>
    <option value="2">False</option>
    <option value="3">Edit</option>
  </select>
  </span>
</fieldset>  
 </body>

And Controller code,
$scope.string = [
    {"_attributes":{"name":"comments"},"_text":"comments"},
    {"_attributes":{"name":"check"},"_text":'Some Content Here'},
    {"_attributes":{"name":"value"},"_text":123}
    ]

我还制作了一个plunkr来演示当前布局的位置，输入框和下拉列表之间存在一些差距。我试图通过填充删除空格：0和边距：0但没有成功。

想要的是，

点击下拉菜单时，选项应位于输入框下方，大小相同，如下所示

此外，如果用户选择True / false，则输入框应为readonly。仅当选择了“编辑”选项时，它才可以编辑。

请建议如何实现这一目标。非常感谢提前。

Answer 1

您可以使用以下内容来选择选项：

 <select id="dropdown" ng-model="selectedOption">
    <option ng-repeat="option in options" value="{{option.isEditable}}">{{option.value}}</option>
 </select>

并将此值用作ng-disabled，如下所示：

<input type="input" id="input"
    ng-repeat="x in string | filter : 'check'" 
    ng-disabled="{{selectedOption}}"
    ng-model="x._text"/>

希望这有帮助！

angularjs如何使下拉大小与div中的inputbox相同

1 个答案: