我正在尝试在我的 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演示当前布局的位置,输入框和下拉列表之间有一些间隙。我试图通过 padding:0 和 margin:0 删除空间但没有成功。
想要的是,
点击下拉菜单时,选项应位于输入框下方,大小相同,如下所示
此外,如果用户选择 True/false ,输入框应变为只读。仅在选择编辑选项时才能编辑。
请建议,这是如何实现的。非常感谢。
最佳答案
您可以使用类似下面的内容来选择选项:
<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"/>
希望这对您有所帮助!
关于html - angularjs如何使下拉列表大小与div中的输入框相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50055745/