angularjs - 如何使用带有输入文本框的 ng-if 和 ng-model？

Question

我正在使用 angularjs。

在我的 html 中，我有 2 个输入框

edit = false;

<input type="text" value=""  data-ng-if="edit" ng-model="name">
<input type="text" value="" data-ng-if="!edit" ng-model="singleAppDetails.name">

所以在这里我想根据某些条件一次只显示一个输入框。但我猜 ng-if 不起作用。基本上如果edit == true我想显示singleAppDetails.name并且如果edit == false那么name

Answer 1

你可以试试这个：

<input type="text" value=""  data-ng-if="edit" ng-model="(edit ? name : singleAppDetails.name)">

这样，您只需使用输入来涵盖这两种情况。

Answer 2

HTML DOM：

<div ng-app="myApp">
    <div ng-controller="testController">
        <input type="text" value=""  data-ng-if="edit" ng-model="name">
        <input type="text" value="" data-ng-if="!edit" ng-model="singleAppDetails.name">
    </div>
</div>

Angularjs：

   angular.module('myApp', [])
    .controller("testController", function($scope){
      $scope.singleAppDetails = {
        "name" : "name if not editable"
      }
      $scope.name = "name if editable";
      $scope.edit = false;
    })

示例：http ://codepen.io/anon/pen/NqKQJO

Answer 3

<div ng-switch="edit">
    <div ng-switch-when='false'>
       <input type="text" value="" ng-model="singleAppDetails.name">
    </div>
    <div ng-switch-when='true'>
       <input type="text" value="" ng-model="name">
    </div>
</div>