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不显示，即使检查员说价值在那里。如果我将值更改为占位符，则显示全部。是不是可以显示文本输入值？ 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'
                })
    });

这是＆＃34; main＆＃34;的一部分。页

<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'构建此指令并实现{{1 }和ngModel.$parsers以您想要的方式处理/显示日期值。（有关详细信息，请参阅ngModelController文档）

Answer 2

请记住使用ng-controller="nameOfController"

将控制器附加到HTML代码

输入值dosn以角度/ html显示

2 个答案: