Question

当我写下名字和姓氏时，我会在它们不再为空时显示任何新文本。

现在我错了。

 {{fullname}}

Create.cshtml

我的按钮超出了我的控制器，迎合了我的角膜

<div ng-app="UserCreatenNow" ng-controller="CreateUserNow">
        <div class="form-group">
            <div class="col-xs-12">
                @Html.LabelFor(u => u.Fornavn)
                @Html.TextBoxFor(u => u.Fornavn, new
           {
               @class = "form-control",
               @ng_model = "firstname",
                @placeholder = HelperTextClass.HelperText.placeholderInfo.Fornavn
           })
                @Html.ValidationMessageFor(u => u.Fornavn, "", new
           {
               @class = "label label-danger"
           })
            </div>
        </div>

        <div class="form-group">
            <div class="col-xs-12">
                @Html.LabelFor(u => u.Efternavn)
                @Html.TextBoxFor(u => u.Efternavn, new
           {
               @class = "form-control",
               @ng_model = "lastname",
               @placeholder = HelperTextClass.HelperText.placeholderInfo.Efternavn
           })
                @Html.ValidationMessageFor(u => u.Efternavn, "", new
           {
               @class = "label label-danger"
           })
            </div>
        </div>
    </div>

user.js的

我在页面底部下载了这个文件。我会在顶部选择angularJs CDN来确保我得到它。

var app = angular.module('UserCreatenNow', []);

app.controller('CreateUserNow', function ($scope) {
    //checking on first name and surname are written.
    if ($scope.firstname != null && $scope.lastname != null) {
        //prints it together
        $scope.fullname = "Welcome to " + $scope.firstname + " " + $scope.lastname;
    }
    else
    {
        $scope.fullname = "Sign up now";
    }
});

你可以看到它image here

更新

<head>
<title>Hello world</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    @Scripts.Render("~/bundle/Scripts/app")
</head>

create.cshtml

<form>
<div ng-app="UserCreatenNow" ng-controller="CreateUserNow">
                <div class="form-group">
                    <div class="col-xs-12">
                        @Html.LabelFor(u => u.Fornavn)
                        @Html.TextBoxFor(u => u.Fornavn, new
                   {
                       @ng_model = "firstname",
                       @class = "form-control",
                       @placeholder = HelperTextClass.HelperText.placeholderInfo.Fornavn
                   })
                        @Html.ValidationMessageFor(u => u.Fornavn, "", new
                   {
                       @class = "label label-danger"
                   })
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-xs-12">
                        @Html.LabelFor(u => u.Efternavn)
                        @Html.TextBoxFor(u => u.Efternavn, new
                   {
                       @ng_model = "lastname",
                       @class = "form-control",
                       @placeholder = HelperTextClass.HelperText.placeholderInfo.Efternavn
                   })
                        @Html.ValidationMessageFor(u => u.Efternavn, "", new
                   {
                       @class = "label label-danger"
                   })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12">
                        @Html.LabelFor(u => u.Kon)
                        @Html.DropDownList("SelectedKon", (SelectList)ViewBag.KonList, new
                   {
                       @class = "form-control",
                   })
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-xs-12">
                        @Html.LabelFor(u => u.KategoriNyhedsbrev)
                        @Html.DropDownList("SelectedKategoriNyhedsbrev", (SelectList)ViewBag.KategoriBrevList, new
                   {
                       @class = "form-control",
                   })
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-xs-12">
                        @Html.LabelFor(u => u.Birthday)
                        @Html.TextBoxFor(u => u.Birthday, new
                   {
                       @class = "form-control",
                       type = "date"
                   })
                        @Html.ValidationMessageFor(u => u.Birthday, "", new
                   {
                       @class = "label label-danger"
                   })
                    </div>
                </div>

                <div class="form-group form-actions">
                    <div class="col-xs-12">
                        <label class="rememberme">
                            @Html.CheckBoxFor(x => x.OpretCheckbox)
                        </label>
                        @Html.ActionLink(HelperTextClass.HelperText.OpretBrugerCheck, "brugerbetingelser", "information")
                    </div>

                </div>

                <div class="form-group">
                    <div class="col-xs-12">
                        <p class="label label-danger"></p>
                        <button type="submit" class="btn btn-effect-ripple btn-success"><i class="fa fa-plus"></i> {{fullname}}</button>
                    </div>
                </div>
            </div>
</form>

js file here：

var app = angular.module('UserCreatenNow', []);

app.controller('CreateUserNow', function ($scope) {
    $scope.$watchGroup(['firstname', 'lastname'], function (firstname, lastname, $scope) {
        if ($scope.firstname != null && $scope.lastname != null) {
            //prints it together
            $scope.fullname = "Welcome to " + $scope.firstname + " " + $scope.lastname;
        } else {
            $scope.fullname = "Sign up now";
        }
    });
});

Answer 1

使用$scope.watchGroup。使用代码段检查以下工作演示。我使用了Angular 1.4

var app = angular.module('UserCreatenNow', []);

app.controller('CreateUserNow', function ($scope) {

    $scope.$watchGroup(['firstname', 'lastname'], function(firstname, lastname, $scope) {
    if ($scope.firstname != null && $scope.lastname != null) {
        //prints it together
        $scope.fullname = "Welcome to " + $scope.firstname + " " + $scope.lastname;
    }
    else
    {
        $scope.fullname = "Sign up now";
    }
});

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="UserCreatenNow" ng-controller="CreateUserNow">

        <div class="form-group">
            <div class="col-xs-12">
                <input type="text" ng-model="firstname">
            </div>
        </div>

        <div class="form-group">
            <div class="col-xs-12">
                <input type="text" ng-model="lastname">
            </div>
        </div>

        {{fullname}}
   </div>

显示全名时出错

1 个答案: