【问题标题】:AngularJS Mathematical expression to ng-modelAngularJS 数学表达式到 ng-model
【发布时间】:2017-05-29 15:38:48
【问题描述】:

我是 AngularJS 开发的新手。我正在做一个项目,其中我有一个包含一组输入的表。我已经使用 ng-model 根据其他两个输入来计算一个输入。 例如,我有一个学生对象,其中包含正确、不正确和未尝试的问题作为键。对于许多学生,我使用ng-repeat,如下所示。但是,当我执行ng-model=some-expression 时,它会在控制台中打印一个错误,说明该表达式是不可赋值的。但它有效。我很困惑有没有办法解决这个问题。 谢谢

HTML:

<tr ng-repeat="student in studentData">
    <td>{{ student.name }}</td>
    <div  ng-show="selectedSubj.indexOf('Physics') > -1">
        <td><input type="number" min="0"  ng-model="student.correctPhysics" required>
        <input type="number" min="0"  ng-model="student.incorrectPhysics" required>
        <input type="number" min="0"  ng-model="student.unattemptedPhysics=noOfQues-student.correctPhysics-student.incorrectPhysics"></td>
    </div>
</tr>

控制器代码:

$scope.studentData = ['Akhilesh'];
for(var i = 0; i < $scope.selectedStudents.length; i++){
  $scope.studentData.push({name: $scope.selectedStudents[i].name, batch: $scope.selectedStudents[i].batch, 
    correctPhysics: 0, incorrectPhysics: 0, unattemptedPhysics: 0,
    correctChemistry: 0, incorrectChemistry: 0, unattemptedChemistry: 0,
    correctMaths: 0, incorrectMaths: 0, unattemptedMaths: 0,
    correctBio: 0, incorrectBio: 0, unattemptedBio: 0, total: ''});
}

【问题讨论】:

    标签: javascript angularjs


    【解决方案1】:

    angular 不允许您在ng-model 中编写表达式。因此,您可以在 ng-init 中执行此操作

    <input type="number" min="0" ng-init="student.unattemptedPhysics=noOfQues-student.correctPhysics-student.incorrectPhysics"  ng-model="student.unattemptedPhysics"></td>
    

    angular.module("app",[])
    .controller("ctrl",function($scope){
    
    $scope.studentData = [{"name":"Akhilesh","batch":"A1","correctPhysics":12,"incorectPhysics":3,"unatemptedPhysics":0,"crrectChemistry":0,"ncorrectChemistry":0,"unattemptedChemisry":0,"correctMaths":0,"incorrectMaths" : 0,"unattemptedMaths":0,"correctBio":0,"ncorrectBio":0,"unatemptedBio":0,"tota":45}]
     
    })
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="app" ng-controller="ctrl">
    <table>
     <tr ng-repeat="student in studentData">
        <td>{{ student.name }}</td>
        <div  ng-show="selectedSubj.indexOf('Physics') > -1">
            <td><input type="number" min="0"  ng-model="student.correctPhysics" required ng-change="student.unattemptedPhysics=noOfQues-student.correctPhysics-student.incorrectPhysics">
            <input type="number" min="0"  ng-model="student.incorrectPhysics" required>
            <input ng-init="student.unattemptedPhysics=noOfQues-student.correctPhysics-student.incorrectPhysics" type="number"   ng-model="student.unattemptedPhysics"></td>
        </div>
    </tr>
    </table>
    </div>

    【讨论】:

    • 谢谢。但是我试过了,好像没有在视图上实时升级?
    • 发布studentData 数组
    • [{"name":"Akhilesh","batch":"A1","correctPhysics":12,"incorrectPhysics":3,"unattemptedPhysics":0,"correctChemistry":0,"incorrectChemistry":0,"unattemptedChemistry":0,"correctMaths":0,"incorrectMaths":0,"unattemptedMaths":0,"correctBio":0,"incorrectBio":0,"unattemptedBio":0,"total":45}]
    • 当我只使用ng-model 时,它会随着我改变输入而改变。希望你能明白我想说的。
    • @Akhilesh Chobey 查看演示
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-11-19
    • 1970-01-01
    • 1970-01-01
    • 2017-04-23
    • 1970-01-01
    • 1970-01-01
    • 2017-09-09
    相关资源
    最近更新 更多