AngularJS

Question

我是 Angular 的新手，所以这可能是一个非常简单的问题，答案非常明显，但我无法通过阅读类似的帖子来解决这个问题，所以我想我在这里问一下。

基本上我有一个文本输入字段，我试图根据其中是否包含任何内容来实时在其下方发出错误消息 appear/dissapear（我也其他字段有不同的错误消息，但会 appear/dissapear 基于不同的标准，所以将其设置为必填字段作为快速修复对我的其他目的不起作用）

据我所知，当我输入或删除文本时，触发器变量正在更新，但错误消息本身显然没有收到备忘录，只是保持原样。

这是我目前所拥有内容的精简版

查看：

<div class="col-sm-12">
    <form class="form-horizontal" autocomplete="off" name="createRiskAssessmentForm">
        <div class="form-group">
            <label for="inputRiskNameId" class="col-sm-2">Name:</label>
            <div class="col-sm-6">
                <input id="inputRiskNameId" class="form-control" type="text" ng-model="riskAssessmentTable.name" name="riskNameField">
                <div ng-hide="$scope.nameFieldHasContent" class="alert alert-danger">This field is required!</div>
            </div>
        </div>
    </form>
</div>

控制器：

'use strict'

module.exports = function (module) {
    module.controller('CreateRiskAssessmentTableController', ['$scope', '$rootScope', function($scope, $rootScope) {

        $scope.$watch('riskAssessmentTable.name', function(name) {
            if (name == '') {
                $scope.nameFieldHasContent = false;
            }
            else {
                $scope.nameFieldHasContent = true;
            }
            console.log('Name field has content?: ' + $scope.nameFieldHasContent);
        });

    }]);
};

我做错了什么？

Answer 1

我认为这行不正确：

<div ng-hide="$scope.nameFieldHasContent" class="alert alert-danger">This field is required!</div>

删除“$scope”。关于 ng-hide 的部分，将其更改为：

<div ng-hide="nameFieldHasContent" class="alert alert-danger">This field is required!</div>

您还可以查看 angular 指令 ng-dirty 和 ng-valid 来帮助解决这个问题。

Answer 2

由于 ng-modal 指向对象 riskAssessmentTable.name，您必须在控制器中预先定义 riskAssessmentTable。试试下面的代码。

module.exports = function (module) {
    module.controller('CreateRiskAssessmentTableController', ['$scope', '$rootScope', function($scope, $rootScope) {

        $scope.riskAssessmentTable = {};

        $scope.$watch('riskAssessmentTable.name', function(name) {
            if (name == '') {
                $scope.nameFieldHasContent = false;
            }
            else {
                $scope.nameFieldHasContent = true;
            }
            console.log('Name field has content?: ' + $scope.nameFieldHasContent);
        });

    }]);
};

AngularJS - 当范围内的触发变量发生变化时，我的错误消息没有更新？

AngularJS - My error messages aren't updating when their trigger variables are changed in the scope?

javascript

watch

angularjs-scope