选项1：

Question

我正在显示一个来自控制器阵列的复选框和一个输入框。要求是根据先前的复选框值启用/禁用输入框。为了测试目的，我在第二个范围内设置了ng-disabled = true，但它应该来自第一个复选框值，并且应该根据用户的输入启用/禁用。

这是我的代码，

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
     <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>    
  <body ng-controller="Controller">

<span>Check: <input type="checkbox" 
  ng-repeat="x in string | filter : 'check'" 
  ng-model="x._text"/></span> 

<span>Value: <input type="text" 
  ng-disabled=true 
  ng-repeat="x in string | filter : 'value'" 
  ng-model="x._text"/></span>  

<br><br>    
{{string}}
 </body>
</html>

我的控制器，

angular.module("app", [])

.controller("Controller", function($scope){

$scope.string = [
    {"_attributes":{"name":"password"},"_text":"password"},
    {"_attributes":{"name":"url"},"_text":"mushmatch"},
    {"_attributes":{"name":"comments"},"_text":"comments"},
    {"_attributes":{"name":"check"},"_text":"true"},
    {"_attributes":{"name":"value"},"_text":123}
    ]  

});

plunkr中的代码

Plunkr

请提出建议。

Answer 1

我更改了你的plunker链接，参考你的确可以

Answer 2

我认为您需要在模型中进行一些调整像这样https://plnkr.co/edit/6XlnpXEY3dA5MTyVhohN?p=preview

HTML

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="Controller">

  <span ng-repeat="x in string">

  Check: 
  <input type="checkbox" 
  ng-model="x.attr.check"/>
  {{x.attr.check}}
  Value:
  <input type="text" 
  ng-disabled="x.attr.check"
  ng-model="x.attr.value"/>
  <br>
  </span> {{string}}
</body>

</html>

JS

angular.module("app", [])

.controller("Controller", function($scope){

$scope.string = [
  {attr:
    {password:"password",
    url:"mushmatch",
    comments:"comments",
    check:false,
    value:123}
  },
  {attr:
    {password:"password2",
    url:"mushmatch3",
    comments:"commentsdsds",
    check:false,
    value:12356}
  }
    ]  

});

Answer 3

选项1：

您需要提取复选框以分隔变量。

<强>的script.js

angular.module("app", [])

.controller("Controller", function($scope){

$scope.check = {"_attributes":{"name":"check"},"_text":true}

$scope.string = [
    {"_attributes":{"name":"password"},"_text":"password"},
    {"_attributes":{"name":"url"},"_text":"mushmatch"},
    {"_attributes":{"name":"comments"},"_text":"comments"},
    $scope.check,
    {"_attributes":{"name":"value"},"_text":123}
    ]  

});

<强>的index.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
     <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Controller">

<span>Check: <input type="checkbox" 
  ng-repeat="x in string | filter : 'check'" 
  ng-model="x._text"/></span>

<span>Value: <input type="text" 
  ng-disabled="check._text === false"
  ng-repeat="x in string | filter : 'value'" 
  ng-model="x._text"/></span>  
<br><br>


{{string}}
 </body>
</html>

Plunk

选项2：

如果您不想更改模型，可以动态找到复选框

angular.module("app", [])

.controller("Controller", function($scope){

$scope.string = [
    {"_attributes":{"name":"password"},"_text":"password"},
    {"_attributes":{"name":"url"},"_text":"mushmatch"},
    {"_attributes":{"name":"comments"},"_text":"comments"},
    {"_attributes":{"name":"check"},"_text":true},
    {"_attributes":{"name":"value"},"_text":123}
    ]  

  $scope.check =  $scope.string.find(function(element) {
    return element._attributes.name === "check";
  });
});

Plunk

Angularjs如何将一个输入模型用于其他输入

3 个答案:

选项1：

选项2：