显示全名时出错答案

【问题标题】：Error to show it fullname显示全名时出错
【发布时间】：2016-04-22 10:14:17
【问题描述】：

当我按照我的意愿写下名字和姓氏时，当它们不再为空时，将显示任何新文本。

现在我弄错了。

 {{fullname}}

创建.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文件：

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";
        }
    });
});

【问题讨论】：

你确定你的页面中包含了 Angular js 库吗？
考虑 CDN 还是文件？
Angular 未启动。您应该在控制台中看到错误。检查它们并尝试找出问题所在。
@RomanHutnyk 错误在这里：postimg.org/image/9cnhg2651
我已经尝试查看了很长一段时间，但在这里我看不到错误/问题

标签： angularjs asp.net-mvc model-view-controller

【解决方案1】：

使用$scope.watchGroup。使用 sn-p 检查以下工作演示。我用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>

【讨论】：

它告诉我的错误仍然与我之前发布的相同。
你目前的问题是什么
确保您使用 angular 1.4 或更高版本并检查答案中的 html。
它的工作原理仍然没有..我真的不知道出了什么问题。我已经完全按照你告诉我的去做了。我有来自 CDN 的 1.4.8
更新了答案。请参阅 1.4.8 的工作演示。确保您的 html 看起来与我的答案相似