AngularJs——在使用ng-init时遇到一个问题

AngularJs - facing an issue when using ng-init

本文关键字：一个 问题 ng-init AngularJs 遇到      更新时间：2023-09-26

我正面临着使用ng-init并在我的html中分配它模型的问题。

下面的代码可以正常工作。下面的代码用于添加/编辑功能。例如，当行is在Edit模式下打开时，它将保留现有值并在textbox中显示。

<div>
    <div ng-if="title == 'Add Student'">
    <input type="text" name="name"placeholder="Student Name" data-ng-model="registration.Student.FirstName" maxlength="50">
    </div>
    <div ng-if="title == 'Edit Student'">
    <input type="text" name="name"placeholder="Student Name" data-ng-model="student.Student.FirstName" maxlength="50">
    </div>
</div>

然而，下面的代码是上面代码的简短版本，不起作用。我的意思是，当行在编辑模式下打开时，它显示文本字段，但不显示其中的现有值(名字)。为什么?

<div ng-init="model = (title == 'Add Student' ? registration.Student : student.Student)">
    <input type="text" name="name" placeholder="Student Name" data-ng-model="model.FirstName" maxlength="50">
</div>

请建议ng-init不能这样使用还是我的代码有问题?

感谢控制器

var currentState = $state.current.name;
    if if (currentState == "Add")
    {
        $scope.registration = {
        Student: {
        FirstName: '',
    }
        var _init = function () {
    }
        $scope.title = " Add Student";
    }
    else
    {
        $scope.student= {};
        $scope.student= response[0];
        var _init = function () {
        $scope.title = " Edit Student";
    }
}

您是ng-init块是错误的，目前它正在返回true或false，您正在搞乱括号。

标记 

<div ng-init="model = (title == 'Add Student') ? registration.Student : student.Student">
    <input type="text" name="name" placeholder="Student Name" data-ng-model="model.FirstName" maxlength="50">
</div>

在你当前的情况下，你的ng-init正在执行，而元素渲染在DOM上，在那个实例上的时间registration.Student &student.Student没有任何值。ng-init设置null对象给model学生的求值。我建议你从控制器逻辑中设置模型值，这会更安全。

var currentState = $state.current.name;
    if (currentState == "Add")
    {
        $scope.registration = {
        Student: {
        FirstName: '',
    }
        var _init = function () {
    }
        $scope.title = " Add Student";
    }
    else
    {
        $scope.student= {};
        $scope.student= response[0];
        var _init = function () {
        $scope.title = " Edit Student";
    }
    //shifted logic in controller
    $scope.model = (title == 'Add Student' ? registration.Student : student.Student);
}

标记

<div>
    <input type="text" name="name" placeholder="Student Name" 
     data-ng-model="model.FirstName" maxlength="50"/>
</div>

另一种方式，你可以添加一个标志，如loadedData，这将表示ajax响应已被获取&registration.Student,

student.Student值在范围内可用。

标记

<div ng-if="loadedData">
    <input type="text" name="name" placeholder="Student Name" data-ng-model="model.FirstName" maxlength="50">
</div>


var currentState = $state.current.name;
    if (currentState == "Add")
    {
        $scope.registration = {
        Student: {
        FirstName: '',
    }
        var _init = function () {
    }
        $scope.title = " Add Student";
    }
    else
    {
        $scope.student= {};
        $scope.student= response[0];
        var _init = function () {
        $scope.title = " Edit Student";
    }
    //set flag
    $scope.loadedData = true;
}
相关文章：