个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
嗨，我是 Angular JS 的新手。我有一个 HTML 文件，其中有一个下拉列表和一个文本区域。文本区域值将根据选定的下拉值进行更新。 此处请注意:文本区域不会显示用户在下拉列表中选择的相同值。它将根据下拉列表的值显示一些其他值。
下面是我的 HTML 代码片段。下拉菜单的值来 self 在 Controller 中进行休息调用后获得的后端:
<select name="functionality" id="functionality" ng-model="selectedFunctionality">
<option ng-repeat="functionality in functionalities.menuDetailsList.menuDetails" value="{{functionality.menuName}}">{{functionality.menuName}}</option>
</select>
<textarea id="scode" class="form-control" ng-model="selectedFunctionality"></textarea>
我从后端得到的响应是这样的 XML 格式:
<menuDetailsList>
<menuDetails>
<menuName>FIRST</menuName>
<taskList>
<task>HYNN911</task>
<task>HXTELE</task>
<task>HXBTBCT</task>
</taskList>
</menuDetails>
<menuDetails>
<menuName>SECOND</menuName>
<taskList>
<task>1234</task>
<task>abcd</task>
<task>efghi</task>
</taskList>
</menuDetails>
<menuDetailsList>
在下拉列表中，我显示“menuName”，正如您在 XML 响应中看到的那样。在文本区域中，我需要显示相应的任务列表。我在 HTML 代码中使用了“ng-model”，但这给出了所选菜单的值。但我需要获得相应的任务值。我们应该怎么做。请帮忙。
最佳答案
我将你的 xml 转换为 json 对象，但其余部分是相同的。使用 $filter 你可以实现它。在这里你可以如何做到这一点。首先，您必须依赖注入(inject) $filter 然后开始使用它。由于每个 menuName 有多个任务，所以我显示了所有任务。
// Code goes here
var app = angular.module('myApp', []);
app.controller('MainController', ['$scope','$filter', function ($scope, $filter) {
$scope.msg = "Hello";
$scope.menuDetailsList = [
{
"menuName": "FIRST",
"taskList": {
"task": [
"HYNN911",
"HXTELE",
"HXBTBCT"
]
}
},
{
"menuName": "SECOND",
"taskList": {
"task": [
"1234",
"abcd",
"efghi"
]
}
}
];
$scope.$watch('selectedFunctionality', function (newV, oldV) {
if (newV != oldV) {
if(angular.isDefined($scope.menuDetailsList)) {
var matchedMenu = $filter('filter')($scope.menuDetailsList, {menuName: $scope.selectedFunctionality});
debugger;
if (matchedMenu.length !=0 ) {
$scope.tasks = matchedMenu[0].taskList.task;
}
}
}
});
}]);<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body class="container" ng-controller="MainController" style="margin-top:20px;">
<div class="row">
<label for="functionality">Select an item</label>
<select name="functionality" id="functionality" ng-model="selectedFunctionality">
<option ng-repeat="functionality in menuDetailsList" value="{{functionality.menuName}}">{{functionality.menuName}}</option>
</select>
</div>
<br />
<div ng-repeat="task in tasks">
<textarea id="scode" class="form-control" ng-model="task"></textarea>
<br />
</div>
<script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
<script src="script.js"></script>
</body>
</html>关于javascript - 如何根据与 Angularjs 中的下拉值的比较来更新文本字段值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42246910/
25
4
0
我想使用 NetworkX Graph 对象作为 Python dict 中的键。但是，我不希望默认的比较行为(即通过对象的地址)。相反，我希望同构图是 dict 中相同元素的键。 此行为是否已在某处
这个问题已经有答案了: What is the most effective way for float and double comparison? (33 个回答) 已关闭 7 年前。 在您认为我
我正在学习 C 编程，为了练习，我找到了一个需要解决的任务。这有点像一个游戏，有人选择一个单词，其他人猜测字母。我必须检查有多少给定的单词可能是所选单词的正确答案。 输入: 3 3//数字 n 和 m
我两天前开始学习C，在做作业时遇到了问题。我们的目的是从字符数组中获取字符列表，并通过计算连续字符并将其替换为数字来缩短它。对“a4b5c5”说“aaaabbbbbccccc”。这是我到目前为止的代码
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
为什么我在 if 中的比较不起作用？答案应该是 8 但它返回 0。 function findMissing(missingArray){ var getArray = missing
我想知道为什么以下 JavaScript 比较会给出不同的结果。 (1==true==1) true (2==true==2) false (0==false==0) false (0==false)
我想知道是否有人可以帮助我完成这个程序。编写一个接受两个字符串的函数。该函数应该将这两个字符串与字典顺序上排在第一位的字符串组合起来。两个字符串之间应该有一个空格。在一行上打印结果字符串。在一行上打印
有谁知道一个免费的开源库(实用程序类)，它允许您比较一个 Java bean 的两个实例并返回一个属性列表/数组，这两个实例的值不同？请发布一个小样本。 干杯 托马斯 最佳答案 BeanCompara
我是java新手。任何人都可以给出以下类声明的含义 public class ListNode, V> { K key; V value; ListNode next;
我需要用 C 语言计算和比较 3 种不同大小(100 * 100、1000 * 1000 和 10000 * 10000)的 2 个矩阵相乘的执行时间。我编写了以下简单代码来为 1000 * 1000
当我在 ACCESS 2007 中运行以下 SQL 时 Select Location, COUNT(ApartmentBuildings) AS TotalIBuildingsManaged Fro
根据我对互斥锁的了解——它们通常提供对共享资源的锁定功能。因此，如果一个新线程想要访问这个锁定的共享资源——它要么退出，要么必须不断轮询锁(并在等待锁时浪费处理器周期)。 但是，监视器具有条件变量，它
通常在编程中，不应该比较浮点数据类型是否相等，因为存储的值通常是近似值。 由于两个非整数 Oracle NUMBER 值的存储方式不同(以 10 为基数)，是否可以可靠地比较它们是否相等？ 最佳答案
使用 PowerShell 时，我们偶尔会比较不同类型的对象。一个常见的场景是 $int -eq $bool (即其中 0 -eq $false 、 0 -ne $true 和任何非零值仅等于真，但不
#include #define MAX 1000 void any(char s1[], char s2[], char s3[]); int main() { char string1[
我想比较两个日期。 从这两个日期中，我只使用 ToShortDateString() 获取日期组件， 如下所示。现在的问题是当我比较两个日期时。它的 throw 错误—— "Operator >= c
用户输入一个数字( float 或整数)，并且它必须大于下限。 这是从 UITextField 获取数字的代码: NSNumberFormatter * f = [[NSNumberFormatter
我已经摆弄这段代码大约一个小时了，它让我难以置信。我认为解决方案相当简单，但我似乎无法弄清楚。无论如何，这里去。我制作了一个 javascript 函数来检查用户输入的字符，以便它只能接受 7 个字符
我不太明白为什么当我们在不覆盖 equals 的情况下比较具有相同类属性的两个实例时方法，它将给出 false .但它会给出 true当我们比较一个案例类的两个实例时。例如 class A(val
我是一名优秀的程序员,十分优秀！