входное значение dosn't не отображается в угловом/html

Question

Пытается установить входное значение, но оно не появится. это моя форма

<form ng-submit="editCar(indexCar);"> 
    Year: <input type="number" value="{{ctrl.cars[ctrl.carIndex].year}}" ng-model="year"><br><br> 
    registered: <input type="text" placeholder="{{ctrl.cars[ctrl.carIndex].registered | date}}" ng-model="registered"><br><br> 
    Make: <input type="text" placeholder="{{ctrl.cars[ctrl.carIndex].make}}" ng-model="make"><br><br> 
    Model:<input type="text" placeholder="{{ctrl.cars[ctrl.carIndex].model}}" ng-model="model"><br><br> 
    Decription:<input type="text" placeholder="{{ctrl.cars[ctrl.carIndex].description}}" ng-model="description"><br><br> 
    Price:<input type="number" value="{{ctrl.cars[ctrl.carIndex].price}}" ng-model="price"><br><br> 
    <input type="submit" value="save"> 
</form> 

типов чисел показывают, но тип текста dosn't появляется, даже если инспектор говорит, что значение есть. если я изменяю значение для заполнителя, он показывает все. невозможно ли показать значение ввода текста? web inspector

мой контроллер

var myApp = angular.module('DemoApp', ["ngRoute"]); 

    myApp.controller('CarController', [function() { 
      var cars = [ 
       {id: 1, year: 1997, registered: new Date(1999, 3, 15), make: 'Ford', model: 'E350', description: 'ac, abs, moon', price: 3000} 
       , {id: 2, year: 1999, registered: new Date(1996, 3, 12), make: 'Chevy', model: 'Venture', description: 'None', price: 4900} 
       , {id: 3, year: 2000, registered: new Date(199, 12, 22), make: 'Chevy', model: 'Venture', description: '', price: 5000} 
       , {id: 4, year: 1996, registered: new Date(2002, 3, 15), make: 'Jeep', model: 'Grand Cherokee', description: 'Air, moon roof, loaded', price: 4799} 

      ]; 

      var self = this; 
      self.cars = cars; 
      self.title = "Cars Demo App"; 
      self.predicate = "year"; 
      self.reverse = false; 
    // self.nextId = 5; 
      self.carIndex = 0; 

      self.addCar = function() { 
       self.newCar.id = self.cars.length + 1; 
       self.cars.push(self.newCar); 
       self.newCar = ''; 
      }; 

      self.deleteCar = function (car) { 

       self.cars.splice(self.cars.indexOf(car), 1); 
      }; 

    //  self.editCar = function (carIndex){ 
    //   
    //  }; 

     }]); 

    myApp.config(function ($routeProvider) { 
     $routeProvider 
       .when("/", { 
        templateUrl: 'newCar.html' 
       }) 
       .when("/edit", { 
        templateUrl: 'edit.html' 
       }) 
    }); 

Это какая-то часть "главной" странице

<div> 
    <div class="col-md-9"> 
     <table class="table"> 
     <thead > 
     <tr> 
      <td>ID</td> 
      <td><a href="" ng-click="ctrl.predicate = 'year'; ctrl.reverse=!ctrl.reverse">Year</a></td> 
      <td><a href="" ng-click="ctrl.predicate = 'registered'; ctrl.reverse=!ctrl.reverse">Registered</a></td> 
      <td><a href="" ng-click="ctrl.predicate = 'make'; ctrl.reverse=!ctrl.reverse">Make</a></td> 
      <td><a href="" ng-click="ctrl.predicate = 'model'; ctrl.reverse=!ctrl.reverse">Model</a></td> 
      <td><a href="" ng-click="ctrl.predicate = 'description'; ctrl.reverse=!ctrl.reverse">Description</a></td> 
      <td><a href="" ng-click="ctrl.predicate = 'price'; ctrl.reverse=!ctrl.reverse">Price</a></td> 
      <td><a>Action</a></td> 
     </tr> 
     </thead> 

     <tbody> 
     <tr ng-repeat="car in ctrl.cars | filter: carfilter | orderBy:ctrl.predicate:ctrl.reverse"> 
      <td>{{car.id}}</td> 
      <td>{{car.year }}</td> 
      <td>{{car.registered | date }}</td> 
      <td>{{car.make}}</td> 
      <td>{{car.model}}</td> 
      <td>{{car.description}}</td> 
      <td>{{car.price | currency}}</td> 
      <td> 
      <a href="#edit" ng-click="ctrl.carIndex = ctrl.cars.indexOf(car)">edit</a> | 
      <a href="#/" ng-click="ctrl.deleteCar(car)">delete</a> 
      </td> 
     </tr> 
     </tbody> 
     </table> 
     <a href="#/">add car</a> 
     <h4>Sort Column: {{ctrl.predicate}}</h4> 
     <h4>Reverse: {{ctrl.reverse}}</h4> 
    </div> 

    <div ng-view class="col-md-3" style="border: thin lightblue solid; border-radius: 5px;padding: 1em;"></div> 

Answer 1

Похоже, вам просто нужно переключить value и placeholder атрибуты быть ng-model. placeholder используется только тогда, когда вход пуст, поэтому в этом случае вы можете просто избавиться от них.

Попробуйте так:

<form ng-submit="editCar(indexCar);"> 
    Year: <input type="number" ng-model="ctrl.cars[ctrl.carIndex].year"><br><br> 
    registered: <input type="text" ng-model="ctrl.cars[ctrl.carIndex].registered" date-input><br><br> 
    Make: <input type="text" ng-model="ctrl.cars[ctrl.carIndex].make"><br><br> 
    Model:<input type="text" ng-model="ctrl.cars[ctrl.carIndex].model"><br><br> 
    Decription:<input type="text" ng-model="ctrl.cars[ctrl.carIndex].description"><br><br> 
    Price:<input type="number" ng-model="ctrl.cars[ctrl.carIndex].price"><br><br> 
    <input type="submit" value="save"> 
</form> 

Обратите внимание, что если вы имели | date фильтр на зарегистрированном поле, я добавил атрибут date-input - вам нужно будет строить эту директиву с require: 'ngModel' и осуществлять ngModel.$parsers и ngModel.$formatters для обработки/отображения значения даты, как вы хотите. (См ngModelController документации для деталей)

Answer 2

забудьте прикрепить контроллер к HTML коду с использованием ng-controller="nameOfController"