如何在Angularjs上檢查複選框時複製輸入？

如果複選框被選中，我試圖複製一個input。如果不是，那麼不要在第二個checkbox上寫任何東西。如何在Angularjs上檢查複選框時複製輸入？

這是對這些元素的引用代碼：

<form name="myCustomForm"> 
    <input type="checkbox" ng-model="checkDuplicate.value1" ng-true-value="{{myCustomForm.ownerName.$viewValue}}" ng-false-value="''"/> 
    <input ng-model="ownerName" placeholder="Enter your name..." name="ownerName" id="ownerName" disabled> 
    <input ng-value="{{checkDuplicate.value1}}" placeholder="Enter the name of the house in which you live..." name="houseOwnerName" required> 
</form>

在我的控制，我有以下初始化複選框：

$scope.checkDuplicate = { 
    value1 : true 
};

我所試圖做的

如果複選框被選中，那麼第二個輸入將是autocomple與第一個的價值相提並論。如果不是，那麼第二個輸入將是空的，直到用戶給它一些值。

我這裏有兩個問題：

第一個

如果我手動設置true或false取決於複選框（我的意思ng-true-value="'true'"和ng-false-value="'false'"）它檢索的狀態以及checkbox具有的價值。

但是，如果我嘗試檢索我的input值，如上所示，我得到一個空值（它沒有關係，如果它有一些值或不，它總是空的）。

第二個

如果我把我的代碼，因爲我已經證明它上面只得到了價值第一次（當頁面加載），而不是下面的時候，我改變checkbox值。

儘管如此，如果我嘗試從input值中檢索出值，我可以正確地獲得複選框的值。我的意思是，如果我做<span>{{checkDuplicate.value1}}</span>它正確顯示。

我試過使用ng-change但沒有成功。

如何解決這些錯誤或如何在checkbox選中時以適當的方式複製我的input？

在此先感謝！

來源

2017-06-13 Francisco Romero

什麼是你的關注？如果複選框被選中，那麼應該添加動態輸入？ –

@RohanKawade不，我的意思是，如果複選框被選中，則第二個輸入將自動完成第一個輸入的值。如果不是，那麼第二個輸入將是空的，直到用戶給它一些值。現在我將這個信息添加到這個問題更加清楚。 –

您可以更改變量以跟蹤輸入與否。有一個工作的例子。

說明

我改變了複選框ng-true-value和ng-false-value它給我們您正在使用的ownerName inputng-model變量名女巫。然後我改變了重複輸入ng-model變量。它正在改變依賴複選框值。如果複選框被選中它正在跟蹤$scope.inputs.name如果不是$scope.inputs.text

var app = angular.module("app",[]); 
 
    app.controller("ctrl", function($scope){ 
 

 
    $scope.inputs = {}; 
 

 
    $scope.checkDuplicate = { 
 
     value1 : 'text' 
 
    }; 
 

 
    })

<html> 
 
     <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     </head> 
 
     <body ng-app="app" ng-controller="ctrl" > 
 
     
 
     
 
     <form name="myCustomForm"> 
 
     <input type="checkbox" ng-model="checkDuplicate.value1" ng-true-value="name" ng-false-value="text"/> 
 
     <input ng-model="inputs.name" placeholder="Enter your name..." name="ownerName" id="ownerName" > 
 
     <input ng-model="inputs[checkDuplicate.value1]" placeholder="Enter the name of the house in which you live..." name="houseOwnerName" required> 
 
    </form> 
 

 

 
     </body> 
 
    </html>

來源

2017-06-13 11:24:44

所以如果我想改變一個'input'的值......我應該在'$ scope'聲明它能夠改變嗎？ –

您已經在範圍內聲明瞭它。只需命名它並按名稱使用它來保護它 –

@ Error404我編輯了跟蹤輸入的答案，而不是它的值 –

<form name="myCustomForm"> 
    <input type="checkbox" ng-model="checkDuplicate.value1" ng-true-value=" 
     {{myCustomForm.ownerName.$viewValue}}" ng-false-value="''" 
      ng-click="updateOwnerName()"/> 
    <input ng-model="ownerName" placeholder="Enter your name..." 
     name="ownerName" id="ownerName" disabled> 
    <input ng-model="houseOwnerName" ng-value="{{checkDuplicate.value1}}" 
     placeholder="Enter the name of the house in which you live..." 
     name="houseOwnerName" required>

click事件添加到複選框。

指定第二個輸入的模型。

現在

控制器

 $scope.checkDuplicate = { 
      value1 : false 
     }; 

    $scope.updateOwnerName=function(){ 
     // write your auto complete logic here 
     // let the value to be displayed in 2nd input is "MARS" 
      if(checkDuplicate.value1){ 
       $scope.houseOwnerName="MARS"; 
       } 
      else{ 
       $scope.houseOwnerName=""; 
       } 

     }

來源

2017-06-13 11:44:52 himanshu

如何在Angularjs上檢查複選框時複製輸入？

回答

相關問題