AngularJS

Question

问题

我想知道 AngularJS "best practice" 获取字段标签的方法是什么。使用 jQuery 您只需使用 "label for" 查询进行查询，然后提取文本。虽然可以用 AngularJS 这样做，但感觉有些不对劲。

假设您的 HTML:

中有这样的内容

<form name="MyForm" ng-controller="Ctrl">
    <label for="MyField">My spoon is too big:</label>
    <input type="text" size="40" id="MyField" ng-model="myField" />

    <br /><br />

    You entered {{ myField }} for {{ myField.label }}
</form>

控制器内部非常简单：

$scope.myField = 'I am a banana.';

基本上我想用“我的勺子太大了。”

在输出中填充 myField.label

我现在在做什么

我现在所做的就是执行一个查询，该查询可以提取类似于 jQuery 方法 ($("label[for='MyField']")) 的数据。然后，如果不存在我只是拉占位符文本。它有效，但似乎有点开销。

我正在努力实现的目标

我想要一些自定义表单验证，我想在消息中包含标签。我只需要提取标签文本，这样我就可以非常通用地编写它，而不必担心人们在游戏后期动态切换 i18n 数据。

Fiddle

根据建议的解决方案： https://jsfiddle.net/rcy63v7t/7/

Answer 1

假设在你的控制器中你有一个像

这样的范围变量

$scope.myField = {};
$scope.myField.label = "Fruit name";

你的模板就像

<form name="MyForm" ng-controller="Ctrl">
    <label for="MyField">{{myField.label}}</label>
    <input type="text" size="40" id="MyField" ng-model="myField.value" />
    <br /><br />
    You entered {{ myField.label }} for {{ myField.label }}
</form>

通过这个字段标签会动态的来。根据您的要求在输入字段中应用自定义验证。

希望我明白你想要什么。

Answer 2

您将 HTML 更改为以下内容：

<label for="MyField">{{ myFieldLabel }}</label>
<input type="text" size="40" id="MyField" ng-model="myField" />

和您的 JS 到以下内容：

$scope.myFieldLabel = 'My spoon is too big:';

然后，您可以 get/set 它的值同样容易：

if ($scope.myFieldLabel === 'My spoon is too big:') {
    $scope.myFieldLabel = 'New label:';
}

请注意，新的 AngularJS 最佳实践要求始终在字段引用中使用 "dot"。如果你做了类似的事情，它会非常适合这里：

<label for="MyField">{{ myField.label }}</label>
<input type="text" size="40" id="MyField" ng-model="myField.value" />

和 JS:

$scope.myField = {
    value: '',
    label: 'My spoon is too big:'
};

那么您可以随时轻松访问 $scope.myField.label 和 $scope.myField.value。

Answer 3

只需将标签文本放入输入 title 即可使用“#”指令。您还可以使用它来确保标签 ID 匹配。

<label for="{{myfield_control.id}}">{{myfield_control.title}}</label>
<input type="text" size="40" id="MyField" ng-model="myField" title="My spoon is too big:" #myfield_control >

<br /><br />

You entered {{ myField }} for {{ myfield_control.title }}

myField 是您的 ngModel。 myfield_control 是对您的输入控件的引用。

AngularJS - 获取字段的标签文本

AngularJS - get label text for field

forms

labels

angularjs-scope

问题

我现在在做什么

我正在努力实现的目标

Fiddle