Блог

Главная - Вопросы по программированию - Ошибка области Angularjs

Ошибка области Angularjs

#html #angularjs #scope #angularjs-ng-model

#HTML #angularjs #область #angularjs-ng-model

Вопрос:

нужна помощь по angular, о которой я ничего не знаю, но мне нужно поработать ^^ ‘ . Моя проблема в том, что когда я пишу в свои входные данные, я не могу получить возврат ng-model и получаю сообщение об ошибке области $scope.newemployee is undefined видимости (исправлено). Новая проблема, моя таблица ‘List’ остается пустой, как мой объект employee

 <!DOCTYPE html>

<html ng-app="employe">
<head>

    <meta charset="utf-8" />
    <title>
        List of employe
    </title>
    <meta name="viewport" content="with=device-width , initial-scale=0 ,shrink- to-fit=no" />
    <link rel="stylesheet" href="./files/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="./files/style.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript">
    </script>
    <script type="text/javascript" src="./files/code.js">
    </script>
</head>

<body>
    <div ng-controller="FormController as FormCtrl">
        <button ng-click="FormCtrl.setShow(2)">Add new employee</button>
        <form class="form-horizontal" ng-controller="ListCtrl" name="infoForm" ng-submit="addEmployee()" ng-show="FormCtrl.isShow(2)" novalidate="" id="infoForm">
            {{newemployee}}
            <h2>
                Add/Edit employee
            </h2><!-- NOM -->
            <div class="form-group">
                <label for="name" class="col-xs-5 control-label">Name</label>
                <div class="col-xs-2">
                    <input type="texte" ng-model:"newemployee.name" class="form-control" ng-required="true" name="name" />
                </div>
            </div><!-- AGE -->
            <div class="form-group">
                <label for="age" class="col-xs-5 control-label">Age</label>
                <div class="col-xs-2">
                    <input type="number" ng-model:"newemployee.age" class="form-control" ng-required="true" />
                </div>
            </div><!-- NICKNAME -->
            <div class="form-group">
                <label for="nickname" class="col-xs-5 control-label">Nickname</label>
                <div class="col-xs-2">
                    <input type="texte" ng-model:"newemployee.nickname" class="form-control" ng-required="true" />
                </div>
            </div><!-- EMPLOYEE -->
            <div class="form-group">
                <label for="employee" class="col-xs-5 control-label">Employee</label>
                <div class="col-xs-2">
                    <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="Yes" ng-model:"newemployee.yes" value="yes" />Yes</label> <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="No" ng-model:"newemployee.no" value="no" />No</label>
                </div>
            </div><!-- JOB -->
            <div class="form-group">
                <label for="job" class="col-xs-5 control-label">Job</label>
                <div class="col-xs-2">
                    <select ng-model:"newemployee.job" class="form-control">
                        <option>
                            Founder
                        </option>
                        <option>
                            Market chef
                        </option>
                        <option>
                            Stage
                        </option>
                    </select>
                </div>
            </div><!-- ANNEE -->
            <div class="form-group">
                <label for="years" class="col-xs-5 control-label">Years</label>
                <div class="col-xs-2">
                    <input type="number" ng-model:"newemployee.years" class="form-control" ng-required="true" />
                </div>
            </div><!-- BUTTON -->
            <div class="center">
                <button type="submit" class="btn btn-default btn-success">Validate</button> <button class="btn btn-default btn-warning" ng-click="FormCtrl.setShow(1)">Cancel</button>
            </div>
        </form>
    </div>

</body>

Здесь код angularjs

 (function () {
      var app = angular.module('employe', []);

      app.controller("FormController", function () {
          this.Edit = 1;

          this.isShow = function(checkEdit){
            return this.Edit == checkEdit;
          };

          this.setShow = function(setShow){
            return this.Edit = setShow ;

          };
          console.log(this.Edit);

      });

      app.controller("ListCtrl", ['$scope', function($scope) {
        $scope.list = /*employee*/[];

        $scope.addEmployee = function(){
            $scope.list.push({
                name: $scope.newemployee.name,
                age : parseInt($scope.newemployee.age),
                nickname : $scope.newemployee.nickname,
                job : $scope.newemployee.job ,
                years : parseInt($scope.newemployee.years),
                salarie : $scope.newemployee.yes   $scope.newemployee.no                  

            });

        };


      }]);



    })();

Ответ №1:

Вероятно, вам следует инициализировать newemployee объект внутри ListCtrl следующим образом

 app.controller("ListCtrl", ['$scope', function($scope) {
    $scope.list = /*employee*/ [];
    $scope.newemployee = {};
    $scope.addEmployee = function() {
        $scope.list.push({
            name: $scope.newemployee.name,
            age: parseInt($scope.newemployee.age),
            nickname: $scope.newemployee.nickname,
            job: $scope.newemployee.job,
            years: parseInt($scope.newemployee.years),
            salarie: $scope.newemployee.yes   $scope.newemployee.no

        });
    };
}]);

Пример входного тега

 <input type="text" class="form-control" ng-required="true" name="name" ng-model="newemployee.name" />

Комментарии:

1. Благодаря newtt у меня больше нет сообщения об ошибке, но мой объект по-прежнему пуст :/

2. Во входных данных вашей формы вам нужно добавить ng-model="newemployee.name имя и так далее и тому подобное. Проверьте отредактированный ответ для получения подробной информации

3. я их получил: <тип ввода=»текст» ng-модель: «newemployee.name » class=»form-control» ng-required=»true» name =»name»> на каждом из моих входных данных, но я не знаю, почему они не появились. я постараюсь это исправить

4. Потому что вы используете ng-model:"newemployee.name" вместо ng-model="newemployee.name" . ng-model по-прежнему является атрибутом, и вам нужно использовать = вместо : .

5. Вот почему в моей скобке было написано красным ‘-‘ .

Ответ №2:

Вы должны связать поля ввода со свойствами, которые вы хотите установить. Вы можете сделать это с помощью ng-model следующим образом:

 <input type="texte" class="form-control" ng-required="true" name="name" ng-model="$scope.newemployee.name" />