个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个使用 ng-options 指令的选择。
我想根据所选选项为 $scope 分配第二个值。
$scope.options = [
{name: 'Apple', id: '1'},
{name: 'Orange', id: '2'},
{name: 'Banana', id: '3'},
{name: 'Pear', id: '4'},
];
参见plunker .
我试图根据所选的 option.name 声明 option.id，以便我可以在 $http.post 中传递它。
基本上就像一个隐藏字段。这是 ng-init 的工作还是其他的工作？
谢谢!
这是完整的 plunker 代码。
html
<!DOCTYPE html>
<html ng-app="select">
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="SelectController">
<div class="form-group col-md-3">
<label for="select1">Select 1:</label>
<select ng-model="newForm.select1"
ng-options="option.name as option.name for option in options | filter: newForm.select2 && {name: '!' + newForm.select2} | filter: newForm.select3 && {name: '!' + newForm.select3}"
class="form-control">
<option value=""></option>
</select>
</div>
<div class="row"><br></div>
<div class="form-group col-md-3">
<label for="select2">Select 2:</label>
<select ng-model="newForm.select2"
ng-options="option.name as option.name for option in options | filter: newForm.select1 && {name: '!' + newForm.select1} | filter: newForm.select3 && {name: '!' + newForm.select3}"
class="form-control">
<option value=""></option>
</select>
</div>
<div class="row"><br></div>
<div class="form-group col-md-3">
<label for="select2">Select 3:</label>
<select ng-model="newForm.select3"
ng-options="option.name as option.name for option in options | filter: newForm.select1 && {name: '!' + newForm.select1} | filter: newForm.select2 && {name: '!' + newForm.select2}"
class="form-control">
<option value=""></option>
</select>
</div>
<div>
<pre>
<code>
Select 1: Name:{{ newForm.select1 }} Id:{{ newForm.select1.id }}
</code>
</pre>
</div>
</body>
</html>
JS
var app = angular.module('select', []);
app.controller('SelectController', function($scope) {
$scope.options = [
{name: 'Apple', id: '1'},
{name: 'Orange', id: '2'},
{name: 'Banana', id: '3'},
{name: 'Pear', id: '4'},
];
});
最佳答案
来自ngOptions文档:
When an item in the menu is selected, the array element or object property represented by the selected option will be bound to the model identified by the ngModel directive.
ng-model对于第一种形式，绑定(bind)为 newForm.select1 。这意味着第一个表单的选定选项可通过以下方式获得:
$scope.newForm.select1
<select> 中的选项值元素必须是 $scope.options 中的项目数组:
<select ng-model="newForm.select1"
ng-options="option as option.name for option in options | filter: newForm.select2 && {name: '!' + newForm.select2} | filter: newForm.select3 && {name: '!' + newForm.select3}"
class="form-control">
<option value=""></option>
</select>
关于javascript - 如何根据 ng-options 设置隐藏值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35201224/
25
4
0
在angular 6项目中，我使用angular cli命令ng g lierary @some/libName创建了 Angular 库。在我的库中，我有一个需要@ng-bootstrap/ng-b
我在 plunker 有一个简单的例子.我在一个元素上有一个 ng-show，另一个元素有一个选择。选择应该切换显示/隐藏其他(输入)元素。最初将 select 设置为 Yes 会按预期显示其他输入元
我需要一个由其定义的属性(受监控)过滤的数据列表，我不能这样做: ng-if="project.monitored" 因为我需要计算不受监控的数量。 对于这个例子，我简化了从 getProjects(
我知道 ng-show 和 ng-hide 影响元素上设置的类，而 ng-if 控制元素是否呈现为 DOM 的一部分 是否有选择 ng-if 而不是 ng-show/ng-hide 或反之亦然的示例？
我试图理解 ng-if 和 ng-show/ng-hide 之间的区别，但它们看起来相同对我来说。 选择使用其中之一时我应该记住什么区别吗？ 最佳答案 ngIf ngIf 指令根据表达式删除或重新创建
我有一个基本问题，通过查看 Angular 文档或 Google 找不到答案，因此我假设这是不可能的，但我想确定一下。 基本上我想要的是使用一个变量，例如$scope.loggedIn，如下所示: H
据我了解ng-show和ng-hide影响元素上设置的类，并且 ng-if控制元素是否呈现为 DOM 的一部分。 是否有选择 ng-if 的指南超过ng-show/ng-hide或者反之亦然？ 最佳答
我的 html 中有几个 div。我正在将内容导出为 PDF，当用户单击导出按钮时会下载 PDF。我希望少数 div 的内容不导出/显示在 PDF 中，但应显示在网页上。我已将 ng-if="!isE
我有一个标记按钮，当用户点击它时，标记讨论，然后标记按钮被替换为文本“成功标记”。目前，我在单击标记按钮后无法禁用 ng-click 时遇到了问题。 ng-click 对于文本“已成功标记”仍然存在，
我在 Angular 1.4.7 中有这段代码: console.log('press') 不会在按下任何键时触发。我也尝试使用 keyup 和 keydown，但它们也不起作用。 我知道一个元素需
正如标题中提到的，我不知道如何使用 ng-bind-html 在部分内部呈现 html。 这里有一个 plunker 来说明。 http://plnkr.co/edit/YFfHsahcum7XA8G
将 ng-bootstrap 安装到我的 Angular-CLI(11.0.4) 时出现错误。 什么时候 ng add @ng-bootstrap/ng-bootstrap 还有我的日志文件 [err
我想从另一个 ng-controller 访问 ng-model，这可能吗？如何实现？在下面的代码中，我使用两个 Controller ，第一个 Controller 具有 mddl1，另一个 Con
在我的应用程序中，当我对文章进行 ng-repeat 时，用户单击“我想隐藏并显示一些元素”。为此，我使用的是 videoPlaying[$index]，它对于所有具有 ng-hide 的元素都可以正
预信息 我尝试将管理员和客户分开在不同的阶段或 View 中。 这样，管理员可以在将表发布给客户之前对其进行修改。 问题在表格 -> td 中有按钮来控制暂存、释放(显示)或恢复(隐藏)？ 所以基本上
这个问题在这里已经有了答案: What are the nuances of scope prototypal / prototypical inheritance in AngularJS? (3
我有以下奇怪的情况 - Controller 片段 - $scope.filterNum = {0: 'filterVal1', 1: 'filterVal2', 2: 'filterVal3', 3
AngularJS 版本:1.3.8 JSFiddle: http://jsfiddle.net/uYFE9/4/ 我一直在开发一个小的 AngularJS 应用程序，遇到了一些问题。我在页面上有一个
我有一个范围对象，其中包含具有 3 个不同图像的对象。我在 div 内显示图像，该图像重复直到范围对象的长度。我有 3 个不同的 img 标签，它们具有 ng-if 属性，并且仅一次显示 3 个图像之
在 AngularJs 中没有提供 ng-enabled 指令。是否有任何适当的理由不在框架中提供该指令，因为当您可以使用 ng- 时，我们同时拥有 ng-show 和 ng-hide隐藏来实现我们的
我是一名优秀的程序员,十分优秀！